TinyMCE -> 无法读取 null 的属性 'setAttribute'

Question

所以我正在制作一个需要 HTML 输入框的 MVC 站点。我有一个从 ajax 对话框 window 加载的文本区域。我知道 TinyMCE 需要我在隐藏对话框时删除控件，没关系。

但是我根本无法加载编辑器。我正在使用带有 jquery 模块的 4.1.9 (2015-03-10) 版。即 tinymce.jquery.js 和 jquery.tinymce.min.js

对话框 window 打开后，我调用它；

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

但我在以下方法的 javascript 中遇到异常，似乎 self.ariaTarget 未定义导致行开始 elm.setAttribute 失败，因为 elm 为空。
我不明白我做错了什么。

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

感谢您的帮助。
马克

编辑：
我一直在关注这个 jsfiddle http://jsfiddle.net/thomi_ch/m0aLmh3n/19/ 而不是将 tinymce 加载到文档中，而是在初始化时从 url 加载它（见下文）。我已经更改了我的代码以使用与示例相同的 script_url 并且它可以呈现编辑器（缺少图标等，因为找不到 css ）但这对我来说意味着有问题使用我的 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);
    }
});

我已经尝试了 jsfiddle 使用的版本 4.1.9 和 4.1.6 中的 tinymce.jquery.js 和 tinymce.js，所有组合都给我同样的错误。
是否可能与另一个库不兼容？

Answer 1

我找到了解决问题的办法。我相信这是由于尝试多次初始化元素造成的，之后我还发现了一个缺陷，即元素在隐藏时没有显示编辑器，因为它在初始化时被隐藏了。

我用来初始化 bootstrap 模态的代码是这样的；

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

那我听文档上的事件；

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

我想有几点需要记住；

只在可见元素上加载 tinyMCE
先初始化tinyMCE
确保每个元素只加载一次
确保每个文本区域都有唯一的 ID（隐藏后将其删除）

我希望这可以帮助其他遇到 TinyMCE 问题的人。

谢谢，
马克.

TinyMCE -> 无法读取 null 的 属性 'setAttribute'

TinyMCE -> Cannot read property 'setAttribute' of null

javascript

jquery

tinymce

TinyMCE -> 无法读取 null 的属性 'setAttribute'