tinyMCE get editor returns null

Question

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 :/

Thariama · Accepted Answer · 2015-11-20T08:13:02.937

12

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);
}

edited Nov 20 '15 at 08:13

answered Nov 20 '15 at 06:48

Thariama

50,002
13
138
166

As you can see both textarea have a different id : #model_editor and #headerfooter_editor Moreover I use get with the id, sorry but I don't understand your answer. – Vincent Teyssier Nov 20 '15 at 06:50
answer edited. type this in your console and tell me what you get: tinymce.editors – Thariama Nov 20 '15 at 08:11
you should be able to use tinyMCE.get('headerfooter_editor') then – Thariama Nov 20 '15 at 08:12
ok so by removing the # in the get parameter I finally got a result : "k {documentBaseUrl: "http://xxxxx.xxx/xxx/", settings: Object, id: "headerfooter_editor", isNotDirty: true, plugins: Object…}" – Vincent Teyssier Nov 20 '15 at 17:31
but then I try to set the content of the editor returned by the get (as on the official documentation): tinyMCE.get('headerfooter_editor').setContent(data.content); I have checked before that data.content is a valid string and is not null, but it doesn't set anything in the editor :/ – Vincent Teyssier Nov 20 '15 at 17:32
i've done a getContent and the content is in.... but not displayed in the editor.... and I've just noticed that I cannot even type in the editor.... – Vincent Teyssier Nov 21 '15 at 10:56
do you still got the problems described? – Thariama Nov 23 '15 at 08:55
yes, I have tried to keep only one editor but still got the issue :/ – Vincent Teyssier Nov 24 '15 at 12:11
gonna open a new question in the afternoon... feel free to participate^^ – Vincent Teyssier Nov 24 '15 at 12:11

score 6 · Answer 2 · edited Jul 19 '16 at 10:43

6

Instead of:

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

use

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

remove #

edited Jul 19 '16 at 10:43

Gynteniuxas

7,035
18
38
54

answered Jul 19 '16 at 09:58

Dominic Tan

61
1
1

score 2 · Answer 3 · answered Aug 31 '20 at 10:05

2

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"})

answered Aug 31 '20 at 10:05

rnviii

51
2

tinyMCE get editor returns null

3 Answers3

Linked