TinyMCE：如何在初始化后添加插件？答案

【问题标题】：TinyMCE: How to add plugin after init?TinyMCE：如何在初始化后添加插件？
【发布时间】：2018-12-27 14:59:34
【问题描述】：

在 Voyager 项目中，它们允许您修改 TinyMCE though a callback function：

function tinymce_init_callback(editor)
{
    //...
}

编辑器的方法在here列出。

我知道通常会在 init 上列出插件：

tinymce.init({
  plugins: [
    'image textcolor'
  ],

但是是否可以在初始化之后添加一个像image 这样的插件和editor 对象？我在文档中找不到这样的功能。

【问题讨论】：

也许您可以直接在您的editor.plugins 对象上添加Plugin instance：editor.plugins['image'] = ...，但您必须了解如何获取插件的实例，也许只是一个要求/进口？

标签： javascript tinymce-4 voyager

【解决方案1】：

这是我的解决方案：

function tinymce_init_callback(editor)
{
  editor.remove();
  editor = null;

  tinymce.init({
    selector: 'textarea.richTextBox',
    skin: 'voyager',
    min_height: 600,
    resize: 'vertical',
    plugins: 'print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern',
    extended_valid_elements: 'input[id|name|value|type|class|style|required|placeholder|autocomplete|onclick]',
    file_browser_callback: function (field_name, url, type, win) {
        if (type == 'image') {
            $('#upload_file').trigger('click');
        }
    },
    toolbar: 'styleselect bold italic underline | forecolor backcolor | alignleft aligncenter alignright | bullist numlist outdent indent | link image table youtube giphy | codesample code',
    convert_urls: false,
    image_caption: true,
    image_title: true
  });
}

首先我删除了现有的 TinyMCE 编辑器实例（由 Voyager 创建），然后我使用我想要的插件和参数创建了一个新实例。

当页面加载并创建新实例时，TinyMCE 会在“public/vendor/tcg/voyager/assets/js/plugins”中搜索插件。 TinyMCE 使用名称“plugin.js”搜索插件 JavaScript 文件，但其中许多插件文件被命名为“plugin.min.js”，导致许多错误导致禁用编辑器。解决这种不便的一种方法是将所有插件文件重命名为“plugin.js”。

【讨论】：

【解决方案2】：

TinyMCE 不允许您在编辑器初始化后加载其他插件。如果您想这样做，您需要使用 remove() API 来删除编辑器，然后您可以再次使用 init() 和您的新配置重新加载编辑器。

【讨论】：

【解决方案3】：

实际上在 2020 年有一个合并请求解决了这个问题：

https://github.com/the-control-group/voyager/pull/4727

现在可以像这样在面包视图中指定插件：

{
    "tinymceOptions" : {
        "plugins": "image textcolor"
    }
}

参见文档：https://voyager-docs.devdojo.com/bread/introduction-1/tinymce

【讨论】：