0

我正在使用具有以下配置的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

4

2 回答 2

3

非常糟糕的代码警报！

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

于 2020-10-20T02:18:21.650 回答
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>
于 2020-10-05T20:47:07.903 回答