时间戳

首页 > 解决方案 > 如何在 TinyMCE 中正确安装插件？

bootstrap-4 - 如何在 TinyMCE 中正确安装插件？

问题描述

我正在尝试在我的网站上安装 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>

网站- （最后一个选项会打开很小）

标签： bootstrap-4tinymce

解决方案

您似乎遇到了一些不同的问题：

TinyMCE 和引导程序：

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

// 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.

……很彻底。如文档中所述：

lists必须激活Lists ( ) 插件才能使advlist插件工作。

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

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

推荐阅读