we've integrated TinyMCE 5 in one of our projects and it is driving me up the wall. Editable content for one of our items is loaded in a Bootstrap 4 modal dialog. After the modal dialog is loaded tinyMCE is called for one of the textareas with:
tinyMCE.init( { selector: "textarea.tinymce",
theme: "silver",
width: "720",
menubar: false,
plugins: "spellchecker,image,paste,searchreplace,fullscreen,print,lists",
language: "de",
toolbar: "undo redo | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | numlist bullist | outdent indent | image | print"
} );
Before the modal window is closed TinyMCE is removed with the following code:
$('textarea.tinymce').each( function()
{
let mceItemID = $(this).attr('id');
tinyMCE.execCommand('mceRemoveControl',true, mceItemID);
tinymce.remove('#' + mceItemID);
});
We've tried with and without the execCommand, the result is always that when the modal window is opened for the second time the TinyMCE item is shown but does not have any content. It is also not clickable or focusable. What else do we have to do to get TinyMCE to re-initialize properly? Thanks
The trick is to call the init function asynchronously when creating the modal dialog: in my initialization function for the modal dialog I now use:
setTimeount( function() { tinyMCE.init( selector: 'textarea#' + mceItemID,..);}, 50 );
Then, when closing the modal windows I call:
tinymce.remove( 'textarea#' + mceItemID );
Now I can call the dynamic modal window multiple times.