TinyMCE & # 8594; Unable to read setAttribute 'null property

Question

so I create an MVC site that needs an HTML input field. I have a text area that loads from an ajax dialog. I understand that TinyMCE I need to remove the control, when I hide the dialog, this is normal.

However, I cannot load the editor at all. I am using version 4.1.9 (2015-03-10) with the jquery module. i.e. both tinymce.jquery.js and jquery.tinymce.min.js

After opening the dialog box, 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 javascript in the following method, it appears self.ariaTarget undefined leading to a line starting with elm.setAttribute because elm is null. I do not understand what I did 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 follow this jsfiddle http://jsfiddle.net/thomi_ch/m0aLmh3n/19/ and instead of loading tinymce into the document, it loads it from the URL when it is initialized (see below). I changed my code to use the same script_url as the example, and it works for rendering the editor (missing icons, etc., since css can not be found), but that means something is wrong with the version of my tinymce.jquery.js.

 $('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 tried both tinymce.jquery.js and tinymce.js from versions 4.1.9 and 4.1.6, as jsfiddle uses, and all combinations give me the same error.
Is it possible that there is incompatibility with another library?

Answer 1

I found a solution to the problem. I believe that this was caused by an attempt to initialize the element several times, and after that I also discovered the disadvantage that the element did not display the editor, since it was initialized when it was hidden.

The code I used to initialize the modal load 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 in 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 think there are a few points to remember:

• Load tinyMCE only on visible items
• Initialize tinyMCE first.
• Make sure it is loaded only every item once
• Make sure that each text field has a unique identifier (and delete it after hiding)

Hope this helps someone else struggling with TinyMCE.

Thanks,
Mark.