TinyMCE 5 和媒体插件：删除（隐藏）"Embed" 选项卡（部分）而不影响其他 components/controls

Question

我正在使用具有以下配置的 TinyMCE 5 和 Media plugin：

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);
  },
});

有没有什么方法可以删除（禁用、隐藏）“嵌入”选项卡（部分）而不影响其他 components/controls？

我已经检查了 documentation for Media plugin 但没有任何关于...

此外，应用此 CSS：

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

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

FIDDLE: http://fiddle.tinymce.com/cwhaab

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

我正在使用 TinyMCE 5.4.2

Answer 1

只用CSS隐藏第二个元素；

<style>
  .tox .tox-dialog__body-nav-item:nth-child(2) {
    display: none;
  }
</style>
<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    menubar: false,
    plugins: [
        "media",
    ],
    toolbar: "media",
    media_dimensions: false,
    media_alt_source: false,
    media_poster: false,
});
</script>

<form method="post" action="dump.php">
    <textarea name="content"></textarea>
</form>

在真实版本中，您应该将控件放在 div 中并使用选择器定位它，以免影响所有 tinymce 控件

编辑： 通过放置选择器，我的意思是执行以下操作

<style>
  .onlyEffectMe .tox .tox-dialog__body-nav-item:nth-child(2) {
    display: none;
  }
</style>
<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    menubar: false,
    plugins: [
        "media",
    ],
    toolbar: "media",
    media_dimensions: false,
    media_alt_source: false,
    media_poster: false,
});
</script>

<form method="post" action="dump.php">
    <div class="onlyEffectMe">
        <textarea name="content"></textarea>
    </div>
</form>

Answer 2

非常糟糕的代码警告！

遗憾的是，没有任何干净的方法来配置编辑器以使其按您的需要工作。话虽这么说，非常糟糕的方法 将通过在执行媒体命令后浏览选项卡列表并隐藏任何包含文本的选项卡来过滤选项卡 Embed.

看看this playground demo:

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>

TinyMCE 5 和媒体插件：删除（隐藏）"Embed" 选项卡（部分）而不影响其他 components/controls

TinyMCE 5 & Media plugin: Remove (hide) "Embed" tab (section) without affecting other components/controls

tinymce

tinymce-5