时间戳

首页 > 解决方案 > TinyMCE 5 和媒体插件：删除（隐藏）“嵌入”选项卡（部分）而不影响其他组件/控件

tinymce - TinyMCE 5 和媒体插件：删除（隐藏）“嵌入”选项卡（部分）而不影响其他组件/控件

问题描述

我正在使用具有以下配置的TinyMCE 5和媒体插件：

tinymce.init({
    selector: "textarea",
    menubar: false,
    plugins: [
        "media image",
    ],
    toolbar: "media image",

    media_dimensions: false,
    media_alt_source: false,
    media_poster: false,
    
    images_upload_url: 'postAcceptor.php',
    images_upload_handler: function (blobInfo, success, failure) {
       setTimeout(function () {
         success('http://moxiecode.cachefly.net/tinymce/v9/images/logo.png');
    }, 2000);
  },
});

有什么方法可以在不影响其他组件/控件的情况下删除（禁用、隐藏）“嵌入”选项卡（部分）？

在此处输入图像描述

我已经检查了媒体插件的文档，但没有任何内容......

此外，应用此 CSS：

<style>
  .tox .tox-dialog__body-nav-item:nth-child(2) {
    display: none;
  }
</style>

隐藏媒体对话框上的“嵌入”选项卡，但它也隐藏其他对话框上的选项卡。例如，它还会隐藏图像对话框上的“上传”选项卡。

小提琴： http ://fiddle.tinymce.com/cwhaab

在 Github 上有一个“功能请求”：https ://github.com/tinymce/tinymce/issues/6082 ...但我正在寻找一种解决方法（直到这个新功能/选项可用）。

我正在使用 TinyMCE 5.4.2

标签： tinymcetinymce-5

解决方案

非常糟糕的代码警报！

不幸的是，没有任何干净的方法可以配置编辑器以使其按您的意愿工作。话虽如此，真正糟糕的方法是在执行媒体命令后通过选项卡列表过滤选项卡并隐藏任何包含文本Embed的选项卡。

看看这个游乐场演示：

tinymce.init({
  selector: "textarea",
  menubar: false,
  plugins: [
    "media image",
  ],
  toolbar: "media image",
  media_dimensions: false,
  media_alt_source: false,
  media_poster: false,


  images_upload_url: 'postAcceptor.php',
  images_upload_handler: function(blobInfo, success, failure) {
    setTimeout(function() {
      success('http://moxiecode.cachefly.net/tinymce/v9/images/logo.png');
    }, 2000);
  },
  setup: function(editor) {
    editor.on('ExecCommand', (event) => {
      const command = event.command;
      if (command === 'mceMedia') {
        const tabElems = document.querySelectorAll('div[role="tablist"] .tox-tab');
        tabElems.forEach(tabElem => {
          if (tabElem.innerText === 'Embed') {
            tabElem.style.display = 'none';
          }
        });
      }
    });
  }
});
<form method="post" action="dump.php">
  <textarea name="content"></textarea>
</form>

推荐阅读