How do I use jQuery to add the TinyMCE WYSIWYG editor to a textarea?

Question

Using jQuery (as part of a theme or plugin) how can I add the WYSIWYG (TinyMCE) rich text editor to a <textarea>? Specifically, I want to activate it upon certain conditions being met (changes in the form etc.).

I have a timer event that checks the text size periodically for a number of reasons, this will be the function that activates the editor.

What do I need to do to make the TinyMCE available on a front end and attach/activate it as required? (looks like the user is writing a lot of text, activate TinyMCE). I assume there is something I need to enqueue but, beyond that, I'm just guessing.

My question is related to this one but differs in that I want to do this with jQuery. Also related, this one, but that's only a partial answer (I still need to know what to hook). I need to set it up and then activate with jQuery.

Answer 1

I would just use the WordPress JavaScript API for TinyMCE — wp.editor.

The steps in brief:

1. PHP: Enqueue the editor scripts (and styles) via wp_enqueue_editor().

2. JS: Call wp.editor.initialize() from your script.

And do take note of this: (the "this function" refers to wp.editor.initialize)

If this function does nothing, please make sure that wp.editor.getDefaultSettings is a function.

Which means, if it's not a function, then while there are no errors thrown in the browser/console, the textarea will not be converted to a TinyMCE editor.