so I'm making an MVC site that needs a HTML input box. I have a text area that loads from an ajax dialog window. I understand that TinyMCE needs me to remove the control when i hide the dialog, that is fine.
I cannot however get the editor to load at all. I am using version 4.1.9 (2015-03-10) with the jquery module. i.e. both tinymce.jquery.js & jquery.tinymce.min.js
Once the dialog window has opened i call this;
$("textarea").tinymce({
// General options
mode: "textareas",
theme: "modern",
// Theme options
menubar: false,
toolbar: "bold,italic,underline,|,bullist,numlist",
statusbar: false,
init_instance_callback: function (editor) {
console.log("tinymce init: " + editor.id);
}
});
But i get an exception in the javascript in the following method, it appears self.ariaTarget is undefined leading to the line starting elm.setAttribute failing because elm is null.
I don't understand what i have done wrong.
/**
* Sets the specified aria property.
*
* @method aria
* @param {String} name Name of the aria property to set.
* @param {String} value Value of the aria property.
* @return {tinymce.ui.Control} Current control instance.
*/
aria: function(name, value) {
var self = this, elm = self.getEl(self.ariaTarget);
if (typeof value === "undefined") {
return self._aria[name];
} else {
self._aria[name] = value;
}
if (self._rendered) {
elm.setAttribute(name == 'role' ? name : 'aria-' + name, value);
}
return self;
},
Thanks for the help.
Mark
Edit:
I have been following this jsfiddle http://jsfiddle.net/thomi_ch/m0aLmh3n/19/ and instead of loading tinymce in with the document, it loads it from a url when it initialises (see below). I've changed my code to use the same script_url as the example and it works to render the editor (missing icons etc as the css cant be found) but this implies to me that there is something wrong with the version of my tinymce.jquery.js file.
$('textarea').tinymce({
script_url : 'http://demo.nilooma.com/system/plugins/tinymce/4.1.6/tiny_mce/tinymce.gzip.php',
toolbar: 'link',
plugins: 'link',
forced_root_block : '',
init_instance_callback: function(editor) {
console.log('tinymce init: '+editor.id);
}
});
I have tried both tinymce.jquery.js & tinymce.js from versions 4.1.9 & 4.1.6 as the jsfiddle uses and all the combinations give me the same error.
Is it possible that there is an incompatibility with another library?
I found a resolution to the issue. I believe it was caused by trying to initialise the element multiple times, and after that I also found a flaw that the element wasn't displaying the editor as it was initialised when it was hidden.
The code I've used to initialise the bootstrap modal is this;
$("#myModal").modal({
keyboard: true
}, "show");
//Bind open
$("#myModal").on("show.bs.modal", function () {
$(document).trigger("DialogLoaded");
});
//Bind close
$("#myModal").on("hidden.bs.modal", function () {
$(document).trigger("DialogClosed");
});
Then I listen to the events on the document;
tinyMCE.init({
// General options
mode: "textareas",
theme: "modern",
// Theme options
menubar: false,
toolbar: "bold,italic,underline,|,bullist,numlist",
statusbar: false,
init_instance_callback: function(editor) {
console.log("tinymce init: " + editor.id);
}
});
$(document).on("DialogLoaded", function () {
var textAreas = $("textarea", $("#myModal"));
for (var i = 0; i < textAreas.length; i++) {
//Check if element already has editor enabled
if (tinymce.get(textAreas[i].id)) {
//Remove existing editor
tinyMCE.execCommand("mceRemoveEditor", false, textAreas[i].id);
}
//Add editor
tinyMCE.execCommand("mceAddEditor", false, textAreas[i].id);
}
});
$(document).on("DialogClosed", function () {
//Remove all editors in dialog
var textAreas = $("textarea", $("#myModal"));
for (var i = 0; i < textAreas.length; i++) {
//Check if element already has editor enabled
if (tinymce.get(textAreas[i].id))
tinyMCE.execCommand("mceRemoveEditor", false, textAreas[i].id);
}
});
I guess there are several points to remember;
I hope this helps someone else having any trouble with TinyMCE.
Thanks,
Mark.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With