动态获取 TinyMCE 设置(将它们应用到另一个 init)

Dynamically get TinyMCE settings (to apply them to another init)

如何获得 TinyMCE settings

我想从第一个编辑器中获取它们并存储在变量中(第一个或最后一个并不重要,只要有问题的脚本不依赖 id 来获取设置)。然后,在需要时,将它们与 tinyMCE.init 一起使用以初始化新编辑器。

var mysettings = $(".tinymce").last().GETEDITORSETTINGS;
$(".button").click(function(){
   mysettings.selector = ".newtextarea";
   tinyMCE.init(mysettings);
});

有两种基本方法可以处理此问题...

选项 1 - 获取当前设置

tinymce.activeEditor.settings 将为您提供一个包含当前 TinyMCE 实例设置的对象。然后,您可以以任何需要的方式操作它,为要实例化的新编辑器实例创建一个新的 init 对象。 (您也可以使用 tinymce.get().settings 来定位特定实例而不是活动编辑器)。

选项 2 -(推荐)使用默认初始化并在每次需要时克隆它

另一个选项(也是我推荐的选项)是在您的页面上创建一个 "default" 初始化对象作为 JavaScript 变量,然后稍后引用它。例如:

var default_init = {
    theme: "modern",
    plugins....,
    toolbar....
}

...然后当你想调用一个 TinyMCE 实例时,你可以使用该基础对象来创建你的 init:

var first_init = jQuery.extend({}, default_init);
first_init.selector = ".first_textarea";
tinymce.init(first_init);

var second_init = jQuery.extend({}, default_init);
second_init.selector = ".second_textarea";
tinymce.init(second_init);

(如果你不使用 jQuery 你可以编写自己的对象克隆方法而不是使用 extend() - 搜索 SO 你会发现很多例子。你不'典型的 init 不需要深拷贝,所以浅拷贝算法就足够了。

你也可以,不用 jQuery 做类似的事情:

// get current settings
let settings = tinymce.activeEditor.settings;
// define what you need
settings.height=150;
// set new settings to the editor
tinymce.init(settings);
// re-add the editor in the vue
tinyMCE.EditorManager.execCommand('mceAddEditor',true, mceu_7); 
// mceu_7 = editor ID