dpDesignz dpDesignz - 10 months ago 54
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 Source

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.