TinyMCE -> Impossibile leggere la proprietà 'setAttribute' di null

Question

quindi sto creando un sito MVC che richiede una casella di input HTML. Ho un'area di testo che viene caricata da una finestra di dialogo Ajax. Capisco che TinyMCE ha bisogno di me per rimuovere il controllo quando nascondo la finestra di dialogo, va bene.

Non riesco comunque a caricare l'editor. Sto usando la versione 4.1.9 (2015-03-10) con il modulo jquery. ovvero entrambi tinymce.jquery.js & jquery.tinymce.min.js

Una volta aperta la finestra di dialogo, lo chiamo;

$("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); 
    } 
}); 

ma ottengo un'eccezione nella javascript nel metodo seguente, appare self.ariaTarget è indefinito porta alla linea di partenza elm.setAttribute riesce a causa olmo è nullo.
Non capisco cosa ho fatto di sbagliato.

/** 
* 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; 
}, 

Grazie per l'aiuto.
Mark

Edit:
Ho seguito questa jsfiddle http://jsfiddle.net/thomi_ch/m0aLmh3n/19/ e invece di caricare TinyMCE in con il documento, lo carica da un URL quando si inizializza (vedi sotto). Ho cambiato il mio codice per usare lo stesso script_url dell'esempio e funziona per renderizzare l'editor (icone mancanti ecc. Poiché il CSS non può essere trovato) ma questo implica che c'è qualcosa di sbagliato nella mia versione di tinymce.jquery file .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); 
    } 
}); 

Ho provato entrambe le tinymce.jquery.js & tinymce.js dalle versioni 4.1.9 4.1.6 & come gli usi jsfiddle e tutte le combinazioni mi danno lo stesso errore.
È possibile che vi sia un'incompatibilità con un'altra libreria?

Answer 1

Ho trovato una soluzione al problema. Credo che sia stato causato tentando di inizializzare l'elemento più volte, e dopo ho anche scoperto che l'elemento non stava visualizzando l'editor poiché era stato inizializzato quando era nascosto.

Il codice che ho usato per inizializzare il modal bootstrap è questo;

$("#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"); 
}); 

Poi ascolto gli eventi sul documento;

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); 
    } 
}); 

Suppongo che ci siano diversi punti da ricordare;

• Solo TinyMCE carico su elementi visibili
• inizializzazione TinyMCE primi
• garantire la sua caricato solo ogni elemento una volta
• Assicurarsi che ogni textarea ha un ID univoco (e rimuoverlo una volta nascosto)

Spero che questo aiuti qualcun altro a causare problemi con TinyMCE.

Grazie,
Marco.