Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

initialize tinymce with content

I have a page containing one tinymce4 editor instance. I want to initialize this editor with some content, programmatically. I know that I have to call: tinymce.get('editor').setContent('my content');

However I have trouble to do this when tinymce is getting initialized. This question has already been asked: initialize tinyMCE with default content but the answer that was given at that time is not working, at least for tinymce4.

Here is what I have tried:

1st attempt:

    tinymce.init({
      mode: "textareas",
      ...
      setup: function (editor) {
         ...
         editor.setContent('my content');
      }
   });

-> Uncaught TypeError: Cannot read property 'body' of undefined

2nd attempt:

    tinymce.init({
      mode: "textareas",
      ...
    };
    tinymce.get('editor').setContent('my content');

-> Uncaught TypeError: Cannot read property 'setContent' of null (however if I do this when the page containing the tinymce editor has already been loaded, it works).

3rd attempt (SO 12083361 answer):

$(document).ready(function(){
    tinymce.get('editor').setContent('my content');
});

-> Uncaught TypeError: Cannot read property 'setContent' of null

All this fails with tinymce.activeeditor.setContent('my content'); as well.

Where should I place tinymce.get('editor').setContent('my content');in my code to have it working ?

like image 386
M. Page Avatar asked Nov 10 '14 08:11

M. Page


People also ask

How do I initialize TinyMCE editor?

Initialize TinyMCE 5 on any element (or elements) on the web page by passing an object containing a selector value to tinymce. init() . The selector value can be any valid CSS selector. For example: To replace <textarea id="mytextarea"> with a TinyMCE 5 editor instance, pass the selector '#mytextarea' to tinymce.

How do I set HTML content in TinyMCE?

You can do this using the setContent() method from the TinyMCE API.

How do I get the content of TinyMCE editor in jQuery?

You can use the activeEditor for that, or if (for some reason) you have the original element that created the editor in a jQuery object, you can use that jQuery object to get the id of the original element and use that in order to get the content of the TinyMCE (using the TinyMCE editor).


1 Answers

With version 4 you should do it like this:

tinymce.init({selector:'textarea'});
tinymce.activeEditor.setContent('custom');

Here's a fiddle.

like image 81
Donatas Bacius Avatar answered Sep 19 '22 20:09

Donatas Bacius