Need help understanding how to use setContent() function in TinyMCE

Question

I am passing text from page 1 to page 2 using LocalStorage. Page2 textarea uses TinyMCE editor. I found this function on the Tiny site which I think is designed for that purpose. However I am new to Javascript and can't make it work. Any help ?

TinyMCE page and function:

My Html:

<div class=" form-group">
        <div class="col-sm-2 col-md-2"><label for="work">Scope of Work:</label></div>
        <div class="col-sm-10 col-md-10"><textarea id="wo_scope" class="form-control tinymce " rows="5" placeholder="Required / Maximum 500 characters" name="work" cols="50"></textarea></div>
    </div>

What, specifically, are you having trouble with? "Teach me javascript" is too broad for SO. — Jason P
I do not specifically understand how to use the prototype at the type at the top of the page: public function setContent(content:String, args:Object):String Specifically what what do I do with the ":String" at the end of the function? — Vince
The :String at the end just tells you that this function returns a string. See the "Returns" section at the end of the doc page. — Jason P
@JasonP Great. When I run the following: function setfunction() { tinyMCE.activeEditor.setContent('some text'); } I get nothing in the editor. So what am I doing wrong ? — Vince
@JasonP What's more, I have 3 text areas with Tiny in them. So need to uniquely ID each one of them. How would I do that ? — Vince

Michael Fromin Michael Fromin · Accepted Answer · 2016-10-03T21:40:36

If you want to load content into TinyMCE as a page loads you can use the setContent function to do that ... but you need to make sure that TinyMCE is initialized before you try to use setContent.

The best way to do that is to put the code to load the content into the configuration object for TinyMCE. For example:

tinymce.init({
  ...
  setup: function (editor) {
    editor.on('init', function () {
        var dataFromLS = <code to get the HTML from local storage>;
        this.setContent(dataFromLS);
    });
  }
  ... 
});

The basic way to use setContent() is just to pass the HTML to is as the only parameter of the method. If you have the data in local storage just grab that first into a JS variable and then do something like this:

var dataFromLS = <code to get the HTML from local storage>;
tinymce.get('wo_scope').setContent(dataFromLS);

Note that in the init example I provided above you can refer to the editor instance as this. You can also get it based on the ID of the<textarea> that you replace with TinyMCE. A more complete (correct) example could do something like this:

tinymce.get('wo_scope').setContent(datafromLS);

The setContent() method works on a specific instance of TinyMCE so you need to have one before you can call setContent(). My examples above show two ways to get that instance get() and in the init using this.

Note: In one of your comments above you use tinymce.activeEditor - that only works if you have clicked into a TinyMCE editor instance - that makes it the "active" editor. If you are doing this on page load you almost certainly don't yet have an active editor.

Need help understanding how to use setContent() function in TinyMCE

1 Answers