【问题标题】：How to install plugins in TinyMCE correctly?如何在 TinyMCE 中正确安装插件？
【发布时间】：2021-03-24 08:39:36
【问题描述】：

我正在尝试在我的网站上安装 TinyMCE

表格、链接和媒体插件不起作用。也就是说，会打开一个弹出窗口，但您不能在字段中输入值 - 只需从列表中选择它。控制台只有一个错误 - 请结合使用列表插件和高级列表插件。

Bootstrap 和 Tiny 可能会发生冲突。但是如何解决呢？

代码

  <script>
    tinymce.init({
   selector: 'textarea#default',
   language: 'ru',
   menubar: 'edit insert',
   toolbar: 'advlist image code link imagetools advcode media powerpaste codesample',
   plugins: 'advlist image code link imagetools advcode media powerpaste codesample',
   default_link_target: '_blank',
   image_list: [
    {title: 'My image 1', value: 'https://www.example.com/my1.gif'},
    {title: 'My image 2', value: 'http://www.moxiecode.com/my2.gif'}
  ]
});
  </script>

...

<textarea id='default'> </textarea>

website - （最后一个选项会打开 tiny）

【问题讨论】：

仅供参考当访问您的链接时，我会收到隐私警告：NET::ERR_CERT_COMMON_NAME_INVALID This server could not prove that it is tipoblog.tw1.ru; its security certificate is from *.timeweb.ru. This may be caused by a misconfiguration or an attacker intercepting your connection.
是的，当我安装 ssl 时一切正常。谢谢

标签： bootstrap-4 tinymce

【解决方案1】：

您似乎遇到了几个不同的问题：

TinyMCE 和引导程序：

您所描述的行为是在 Bootstrap 中使用 TinyMCE 时的常见问题，尤其是在对话框/模式中。您可能需要使用以下代码在 Bootstrap 对话框中覆盖 focusin 上的内置块：

// Prevent Bootstrap dialog from blocking focusin
$(document).on('focusin', function(e) {
  if ($(e.target).closest(".tox-tinymce, .tox-tinymce-aux, .moxman-window, .tam-assetmanager-root").length) {
    e.stopImmediatePropagation();
  }
});

这是一个有效的 Tiny Fiddle 演示： http://fiddle.tiny.cloud/gRgaab

https://www.tiny.cloud/docs/integrations/bootstrap/#usingtinymceinabootstrapdialog

插件与工具栏：

您的plugins 和toolbar 配置也列出了相同的项目：

 toolbar: 'advlist image code link imagetools advcode media powerpaste codesample',
 plugins: 'advlist image code link imagetools advcode media powerpaste codesample',

插件不是工具栏项。插件是可以添加到编辑器的一些额外的可选功能。工具栏按钮是执行特定命令的可点击 UI 元素。这些命令可能用于插件功能或核心编辑器功能。

可在此处找到可用工具栏按钮的列表：

https://www.tiny.cloud/docs/advanced/available-toolbar-buttons/

列表和高级列表：

控制台错误：

Please use the List plugin together with the Advanced List plugin.

...非常彻底。正如documentation中提到的：

必须激活列表 (lists) 插件，advlist 插件才能工作。

这可以通过将lists 添加到您的plugin 配置来解决：

 plugins: 'lists advlist image code link imagetools advcode media powerpaste codesample',

【讨论】：