javascript - tinyMCE 获取编辑器返回 null

Question

我在具有不同 id 的 2 个文本区域上初始化 2 个 tinyMCE 编辑器:

var variable_array = {id:'cName', test:'mon test'};
tinymce.init({
    selector: "#model_editor",
    entity_encoding : "raw",
    encoding: "UTF-8",
    theme: "modern",
    height: "500px",
    width: "100%",
    variables_list : variable_array,
    plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern modelinsert"
    ],
    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image print preview media | forecolor backcolor emoticons",
    toolbar2: "variable_insert | question_insert",
    image_advtab: true,
    templates: [
        {title: 'Test template 1', content: 'Test 1'},
        {title: 'Test template 2', content: 'Test 2'}
    ]
});

tinymce.init({
    selector: "#headerfooter_editor",
    entity_encoding : "raw",
    encoding: "UTF-8",
    theme: "modern",
    height: "500px",
    width: "100%",
    variables_list : variable_array,
    plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern modelinsert"
    ],
    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image print preview media | forecolor backcolor emoticons",
    toolbar2: "variable_insert | question_insert",
    image_advtab: true,
    init_instance_callback : "mceInitInstance",
    templates: [
        {title: 'Test template 1', content: 'Test 1'},
        {title: 'Test template 2', content: 'Test 2'}
    ]
});

两个编辑器都正确初始化。然后为了在每个上设置不同的内容，我尝试获取编辑器实例对象 id :

var editor_id = tinyMCE.get('#headerfooter_editor');
console.log(editor_id);

返回 null :/

我还尝试在控制台中获取第二个 init 的回调结果:

function mceInitInstance(inst) {

console.log("Editor: " + inst.editorId + " is now initialized.");

它返回:编辑器:未定义现已初始化。

我想做以下事情:

tinyMCE.get('#headerfooter_editor').setContent(data.content);

但它当然会返回一个错误:Uncaught TypeError: Cannot read property 'setContent' of null

我不明白出了什么问题以及为什么我无法获取编辑器实例 id :/

Answer 1

您的编辑器应该可以使用 tinymce.get('model_editor') 和 tinymce.get('headerfooter_editor') 来使用。

提示:tinymce.editors 保存所有已初始化的编辑器实例。您可以循环遍历该数组以获取全部内容:

for (var i = 0; i < tinymce.editors.length; i++)
{
    console.log("Editor id:", tinymce.editors[i].id);
}