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

问题

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!

回答1:

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

回答2:

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

回答3:

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

回答4:

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

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

回答5:

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.

回答6:

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

来源：https://stackoverflow.com/questions/20390743/how-do-i-set-content-in-tinymce-4-preferably-within-the-document-ready-bl

标签

javascript

jquery

tinymce-4