dpDesignz dpDesignz - 1 month ago 9
Ajax Question

Reinitialize TinyMCE 4 in AJAX

I'm using TinyMCE in an ajax enabled Foundation Reveal box. Now the TinyMCE kicks in the first time it loads, but if I close the box and open it again it doesn't trigger :(

I have other scripts like chosen and masked input triggered in the exact same fore query that work, but TinyMCE will not reinitialize when I reload it a second time

This is my code currently that I'm trying as recommended at this question:

$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
$("#expenseUser, #expenseVendorID, #expenseCategoryID, #expenseAccidentID").chosen({disable_search_threshold: 5, width: '365px'});
$("#expOdo").mask("999999",{placeholder:"0"});
$('.datePicker').each(function() {
$(this).datetimepicker({
addSliderAccess: true,
sliderAccessArgs: {touchonly: false},
changeMonth: true,
changeYear: true,
altField: "#"+$(this).attr('id')+"Alt",
altFieldTimeOnly: false,
altFormat: "yy-mm-dd",
altTimeFormat : "HH:mm:ss",
dateFormat: "D, d MM yy",
timeFormat: "hh:mmtt"
});
});
tinymce.execCommand('mceRemoveEditor',true,"textarea#expenseComments");
tinymce.execCommand('mceAddEditor',true,"textarea#expenseComments");
tinyMCE.init({selector: "textarea#expenseComments",menubar : false,toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright"});
});


UPDATED

I've tried changing to the following with luck, but I think this is the right path to go down?

$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
$("#expenseUser, #expenseVendorID, #expenseCategoryID, #expenseAccidentID").chosen({disable_search_threshold: 5, width: '365px'});
$("#expOdo").mask("999999",{placeholder:"0"});
$('.datePicker').each(function() {
$(this).datetimepicker({
addSliderAccess: true,
sliderAccessArgs: {touchonly: false},
changeMonth: true,
changeYear: true,
altField: "#"+$(this).attr('id')+"Alt",
altFieldTimeOnly: false,
altFormat: "yy-mm-dd",
altTimeFormat : "HH:mm:ss",
dateFormat: "D, d MM yy",
timeFormat: "hh:mmtt"
});
});
tinyMCE.init({selector: "textarea#expenseComments",menubar : false,toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright"});
});
$(document).on('close.fndtn.reveal', '[data-reveal]', function () {
tinymce.execCommand('mceRemoveEditor',true,"textarea#expenseComments");
});

Answer

Problem here is that closing the box without shutting down the inner tinymce instance properly will result in not showing the editor the second time (because there is still a tinymce editor object in the variable window.tinymce.editors).

Solution: onclose (in fact before destroying or removing) of the box shut down the editor.