tinyMCE - tinyMCE.triggerSave() vs tinyMCE.get("id_here").triggerSave()

71 Views Asked by At

I've been using tinyMCE happily for many years. Embarking on a new web form today I encountered two problems accessing the editor that I hadn't run into before:

First, using jQuery.ready I invoke tinyMCE.init to initialize <textarea id="message_content" name="content"></textarea> and later invoke a function that retrieves data via AJAX to initialize the form of which that <textarea> is a field, but found that tinyMCE.get("message_content") returned an object without the setContent function. With a lucky guess I got it to work by delaying the invocation of the loading function by 100ms using setTimeout. I hadn't realized there was asynchronous activity in tinyMCE.init for which I had to wait. Have I just been lucky with earlier projects?

Second, when trying to invoke triggerSave() when the form is submitted, even after fixing the first problem, tinyMCE.get("message_content") delivered an object without the triggerSave function. Curiously, using just tinyMCE.triggerSave()worked to update the form field before submission since there's only one on the page.

I've triple checked the spelling of the textarea id in both cases. I emit the tinyMCE.init via the same PHP function I've used for years that takes the element ids for all the fields for which tinyMCE should be initialized, of which there is only one in this case.

What am I not understanding about tinyMCE that would explain why tinyMCE.get("message_content") is not returning an editor for the <textarea> in these two situations? Thanks in advance for any hints. I'm preparing to smack my head...

1

There are 1 best solutions below

0
Stobor On

For your first point: tinymce.init() returns a Promise, so if you want to use it synchronously, you will need to await it. See tinymce.init() API docs. (This changed between tinyMCE 3 which returned void, and tinyMCE 4 which started returning a Promise.)

For your second question, it seems like you've misunderstood the API. Editors don't have a triggerSave() method, they have a save() method. The tinymce.triggerSave() method triggers the save() method on every Editor instance on the page. See the API Docs for triggerSave() and save().