javascript tinyMCE 获取编辑器返回 null

tinyMCE get editor returns null

提问by Vincent Teyssier

I initialize 2 tinyMCE editor on 2 textarea with different id :

我在 2 个具有不同 id 的 textarea 上初始化了 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'}
    ]
});

Both editors init correctly. Then in order to set different content on each, I try to get the editor instance object id :

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

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

It returns null :/

它返回空：/

I try also to get in the console the result of the callback of the second init :

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

function mceInitInstance(inst) {

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

And it returns : Editor: undefined is now initialized.

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

I want to do the following :

我想做以下事情：

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

but of course it returns an error : Uncaught TypeError: Cannot read property 'setContent' of null

但当然它会返回一个错误：未捕获的类型错误：无法读取 null 的属性“setContent”

I don't understand what's wrong and why I can't get the editor instance id :/

我不明白出了什么问题以及为什么我无法获得编辑器实例 ID：/

回答by Thariama

Your editors should be available using tinymce.get('model_editor')and tinymce.get('headerfooter_editor').

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

Hint: tinymce.editorsholds all editor instances that have been initialized. You can loop through that array to get them all:

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

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

回答by Dominic Tan

Instead of:

代替：

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

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

use

利用

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

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

remove #

消除 #