Change div to textarea with TinyMCE using jQuery replaceWith()

Question

I want to change some text with tinyMCE editor using jQuery replaceWith(), It's no problem with replaceWith() function itself, but I don't know how to implement tinyMCE editor to new textarea.

<div id="div">Some text</div>

When edit button clicked, will change to

<textarea id="new">Some text</textarea> (with tinyMCE editor)

I tried 2 ways,

1. Init tinymce selector before replacing - not working

tinymce.init({
    selector: "#input_insertComment",

2. - useing tinymce instance(?) - not working

$('#div').replaceWith("<textarea id=new>some text</textarea>");
tinymce.initMCEexact("#new");

Both the editor aren't implemented. How can I do that?

(At the same page, I have tinymce editor for another textarea.)

Answer 1

When you call tinymce.init() it will only impact items that exist in the DOM when you call init() . If you are adding elements to the page later the init() call won't then replace them with TinyMCE.

The sequence you want is...

1. Add the textarea to the DOM
2. Call tinymce.init() and use the selector option in the init to target the textarea that you just added to the page.

I am not aware of tinymce.initMCEexact() as an actual API call that was ever part of TinyMCE - its not part of TinyMCE 4 for sure.