The Problem
- After saving a form on a page (with multiple forms), I did a jQuery.load() to replace the DOM of the particular section.
- Then I run the initialization function to reinitialize all DOMs, including TinyMCE.
- I realized TinyMCE contents is not saved after this.
Solution: Initial attempt
After Google-ed for a while, I found this solution from StackOverflow.
tinymce.execCommand('mceRemoveControl', true, 'editor_id');So, to use it, it would be...
_init = function() {
/* Some other initialization code here */
tinymce.execCommand('mceRemoveControl', true, 'editor_id');tinyMCE.init({
/* TinyMCE options */
});
}Oh, wait...
Some issues:
- My 'editor_id' is dynamic...
- I have multiple textboxes
Solution: Second attempt.
Easy. Just use jQuery.each() to loop through all the textbox and remove TinyMCE control from each of them.
_init = function() {
jQuery('textarea').each(function() {
try {
tinymce.execCommand('mceRemoveControl', true, jQuery(this).attr('id'));
} catch(e) {
}
})
tinyMCE.init({
/* TinyMCE options */
});
}Oh, wait... again...
Some more issues:
- Due to asynchronous nature of Javascript, tinyMCE.init() will be executed befure jQuery.each() finishes.
Final Solution
Chain the functions together with jQuery.promise().
jQuery('textarea').each(function() {
try {
tinymce.execCommand('mceRemoveControl', true, jQuery(this).attr('id'));
} catch(e) {
}
}).promise().done( function() {
tinyMCE.init({
/* TinyMCE options */
});
});:)
