Search code examples
javascripttinymce

TinyMCE use after being reinserted into document

I'm having a difficult time making TinyMCE work after it has been removed from the document and then re-inserted. I've created this TinyMCE Fiddle to demonstrate the issue: https://fiddle.tiny.cloud/F8iaab/3 .

To see the issue:

  1. Click the "Init / re-init TinyMCE" button. This will initialise TinyMCE below the buttons.
  2. Now click "Remove content" to remove the container from the document
  3. Click the "Append content" button to put it back in
  4. Finally, click the first button again - its impossible to enter text into the editor.

The final step is based on other discussions I've found on this topic (references below).

Any ideas how I can make a TinyMCE instance usable after being reinserted into a document?

Refs:

Solution

  • Seems to work if you remove the tinymce instance when removing content.

    function removeContent() {
    container.parentNode.removeChild(container);
    var editor = tinymce.get('content');
    if (editor) {
        editor.remove();
    }
}

    Fiddle.