tinyMCE 獲取編輯器返回 null

Question

我在 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'}
    ]
});

兩個編輯器都正確初始化。 然后為了在每個上設置不同的內容，我嘗試獲取編輯器實例對象 id ：

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

它返回空：/

我還嘗試在控制台中獲取第二個 init 回調的結果：

function mceInitInstance(inst) {

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

它返回：編輯器：未定義現在已初始化。

我想做以下事情：

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

但當然它會返回一個錯誤：未捕獲的類型錯誤：無法讀取 null 的屬性“setContent”

我不明白出了什么問題以及為什么我無法獲得編輯器實例 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);
}        

Answer 2

代替：

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

用

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

刪除#

Answer 3

我遇到了同樣的問題。 錯誤消息是：

TypeError: tinymce.get(...) is null

但我的錯誤是我在啟動 tinymce 編輯器之前嘗試了tinymce.get(...) 。

tinymce.init({selector: "#mytextarea"})