How do I set content in TinyMCE 4, preferably within the $(document).ready(); block?

Question

As the title says, I've looked up the official documentation but it ain't working; here's my JavaScript (utilizing jQuery) code:

$(document).ready(function() {
    tinymce.init({
        element_format: "html",
        schema: "html4",
        menubar: false,
        plugins: 'preview textcolor link code',
        selector: 'TEXTAREA#rtf',
        toolbar: 'preview | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | blockquote subscript superscript | code'
    });
    tinymce.activeEditor.setContent($('TEXTAREA#rtf').text());
});

I've tried to inspect tinymce and tinyMCE (got this from Googling) instances, and they both are objects alright.
I've also tried to inspect tinymce.activeEditor and tinyMCE.activeEditor, but they turn out to be null!

(Cough) Somehow, after I restored everything back to where I started now it works:

$(document).ready(function() {
    tinymce.init({
        element_format: "html",
        menubar: false,
        plugins: 'preview textcolor link code',
        schema: "html4",
        selector: 'TEXTAREA#rtf',
        toolbar: 'preview | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | blockquote subscript superscript | code'
    });
});

I suspect it was due to either the UA cache or the XSLT transformed result cache that made the issue; thanks again for your time!

Radomír Laučík · Answer 1 · 2017-01-16T14:13:51.780

7

I have found better solution that works anywhere in code (and is not a hack, unlike the setTimeout trick)

tinymce.get('tinymce-element-id').on('init',function(e) {
      e.target.setContent('my custom content');
});

edited Jan 16 '17 at 14:13

answered Aug 31 '16 at 07:04

Radomír Laučík

388
5
14

score 6 · Answer 2 · answered Dec 05 '13 at 03:40

this is how I implemented it:

setTimeout(tinyMCE.init({
                            selector: "textarea.edit_notes",
                            height: editor_height,
                            theme: "modern",
                            menubar: "tools table format view insert edit",
                            force_br_newlines : false,
                            force_p_newlines : false,
                            forced_root_block : '',
                            //plugins: "fullpage",
                            valid_elements : '*[*]',
                            setup: function(ed){
                                ed.on("init",
                                      function(ed) {
                                        tinyMCE.get('testeditor').setContent($('#testeditor').val());
                                        tinyMCE.execCommand('mceRepaint');

                                      }
                                );
                            }
                            }), 50);

Give it a shot

score 6 · Answer 3 · edited Dec 22 '16 at 19:53

6

tinymce.activeEditor.setContent('<span>some</span> html');

https://www.tinymce.com/docs/api/tinymce/tinymce.editor/#setcontent

edited Dec 22 '16 at 19:53

Mike Barwick

6,288
6
51
76

answered Jul 11 '14 at 16:55

Fury

4,643
5
50
80

1

tinymce all lower case, not tinyMCE for me. – Joe Oct 28 '15 at 13:03
depends what version you are using – Fury Oct 28 '15 at 16:03
Well, OP specified v4. – Mike Barwick Dec 22 '16 at 19:53

score 6 · Answer 4 · answered Aug 28 '18 at 23:31

6

This thread set me on the right track so I thought I'd share my solution with v4

tinymce.init({
     ...,
     init_instance_callback:function(editor){
         editor.setContent(__YOUR_CONTENT__);  
     }
});

answered Aug 28 '18 at 23:31

Eric

9,870
14
66
102

score 0 · Answer 5 · answered Dec 05 '13 at 03:23

0

This code runs as soon the document is in ready state, so the only thing is tinymce is setting the content even before textarea has content. One question where and how is the content being set in the textarea?

Secondly can you place tinyMCE.init({ .... }); in setTimeOut.

Hope this helps.

answered Dec 05 '13 at 03:23

Harsain

121
2

can you try one thing before `tinyMCE.init({ ... })` try alerting the contents of the textarea. also did you try settimeout – Harsain Dec 05 '13 at 03:34
Thanx for the quick response; content in the is loaded while the page is generated: My program pulls content from DB and constructs web page using XSLT, therefore we should be confident that the content is static before any script accessing it. BTW, I think the order of execution is as the following: 1. Content, as well as HTML are generated at the same time (from the UA's perspective). 2. UA constructs DOM, when it's done, jQuery comes into the game. 3. tinymce.init(); initializes itself, but not yet providing an instance itself. (based on your answer, thanx again) – 高科技黑手 Dec 05 '13 at 03:44

Jordan P · Answer 6 · 2013-12-05T03:40:54.880

0

I remember doing something like this once, manually adding the textarea value to TinyMCE:

tinyMCE.init({
   ...
   setup : function(editor) {
      editor.setContent($('TEXTAREA#rtf').text());
   }
});

The "editor" parameter for setup function is a TinyMCE instance, guaranteed to be there. Haven't used TinyMCE in a while, but I remember having numerous problems like this! You're not alone in finding issues here.

But why not use something like this? http://www.tinymce.com/wiki.php/Configuration3x:editor_selector

tinyMCE.init({
        ...
        mode : "specific_textareas",
        editor_selector : "TEXTAREA#rtf" // CSS Selectors
});

Which is the default way to use TinyMCE. It will convert your textareas into TinyMCE instances and keep the value synced between the input and TinyMCE

edited Dec 05 '13 at 03:40

answered Dec 05 '13 at 03:34

Jordan P

1,499
1
10
14

I've tried both approaches, neither works out for me; I don't know if this has anything to do w/ the TinyMCE version (4.0.11 to be exact), coz I don't find setup, mode, and editor_selector from official documention (under API 4.x). But I tried anywayz. Thanx to your answer, it helps me understand this lib more! – 高科技黑手 Dec 05 '13 at 04:08
Have you tried replicating their Installation tutorial exactly? http://www.tinymce.com/wiki.php/Installation (This is for API4.x) You're probably doing something out of order and the error messages aren't very helpful. – Jordan P Dec 05 '13 at 04:28

Alexandre Elshobokshy · Answer 7 · 2020-06-15T10:54:21.890

0

I've been doing it that way :

tinymce.init({
     ...
     setup: function (editor) {
        editor.on('init', function () {
            editor.setContent('<p>Some content goes here.</p>');
            tinymce.triggerSave();
        })
     },
     ...
});

edited Jun 15 '20 at 10:54

answered Jun 15 '20 at 10:44

Alexandre Elshobokshy

10,720
6
27
57

How do I set content in TinyMCE 4, preferably within the $(document).ready(); block?

7 Answers7

Linked