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

user_1916461 0
Viewed 29748

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());
});
  1. I've tried to inspect tinymce and tinyMCE (got this from Googling) instances, and they both are objects alright.
  2. 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!

tinymce-4 jquery javascript
7 Answers

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

user_14365480

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

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.

user_14365480

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

user_8327700

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();
        })
     },
     ...
});
user_99424180
Related