At some point, there was a need to reload multiple TinyMCE editors on one page, but embedded in different components.
For a project written in AngularJS, we can use the tinymce
global object, which contains a nested variable EditorManager.editors
. To access each editor, simply iterate through each element of the array of this variable. To reload an editor, you can call the execCommand
function with parameters mceRemoveEditor
and mceAddEditor
adding a small delay (timeout) between each call.
Example code:
tinymce.EditorManager.editors.forEach(function (editor) {
tinymce.EditorManager.execCommand('mceRemoveEditor', false, editor.id);
$timeout(() => {
tinymce.EditorManager.execCommand('mceAddEditor', false, editor.id);
tinymce.settings = $scope.tinymceOptions;
});
});
Enjoyed the story? 🤔
If this article was useful for you, please consider supporting me by making a donation.