TinyMCE:如何在初始化后添加插件?

时间:2018-07-19 12:52:49

标签: javascript tinymce-4

在Voyager项目中,他们允许您修改TinyMCE though a callback function

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

编辑器的方法在here中列出。

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

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

但是在初始化后是否可以向editor对象添加类似image的插件?我在文档中找不到这样的功能。

2 个答案:

答案 0 :(得分:2)

TinyMCE不允许您在初始化编辑器后加载其他插件。如果要执行此操作,则需要使用remove() API删除编辑器,然后可以在新配置中再次使用init()来重新加载编辑器。

答案 1 :(得分:2)

这是我的解决方案:

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
});

}

首先,我删除由Voyager创建的TinyMce编辑器的现有实例,然后再创建一个包含所需插件和参数的新实例。

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