TinyMCE -> Cannot read property 'setAttribute' of null

Question

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?

Answer 1

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;

• Only load tinyMCE on visible elements
• Initialise tinyMCE first
• Ensure its only loaded each element once
• Make sure each textarea has a unique id (and remove it once hidden)

I hope this helps someone else having any trouble with TinyMCE.

Thanks,
Mark.