CODEWITHSUNDEEP
javascriptjquerytinymce
Vincent Teyssier
Vincent Teyssier

Reputation: 2217

tinyMCE get editor returns null

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

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 :

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 :

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

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

Upvotes: 5

Views: 16050

Answers (3)

rnviii
rnviii

Reputation: 71

I got the same problem. The error message was:

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

But my error was that I tried to tinymce.get(...) before initiating tinymce editor.

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

Upvotes: 2

Dominic Tan
Dominic Tan

Reputation: 61

Instead of:

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

use

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

remove #

Upvotes: 6

Thariama
Thariama

Reputation: 50832

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

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

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

Upvotes: 12

Related Questions