TinyMCE如何正确安装插件？

Question

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

table、link 和媒体插件不起作用。也就是说，会打开一个弹出窗口，但您无法在字段中输入值 - 只能从列表中输入 select。控制台只有一个错误 - 请将 List 插件与 Advanced List 插件一起使用。

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）

Answer 1

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

TinyMCE 和 Bootstrap:

您描述的行为是在 Bootstrap 中使用 TinyMCE 时的常见问题，尤其是在 dialog/modal 中。您可能需要使用以下代码覆盖 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中所述：

The Lists (lists) plugin must be activated for the advlist plugin to work.

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

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

TinyMCE如何正确安装插件？

How to install plugins in TinyMCE correctly?

tinymce

bootstrap-4

TinyMCE 和 Bootstrap:

插件与工具栏：

列表和高级列表：