TinyMCE bug IE 调用 tinyMCE.editors答案

【问题标题】：TinyMCE bug IE call tinyMCE.editorsTinyMCE bug IE 调用 tinyMCE.editors
【发布时间】：2016-03-15 17:37:33
【问题描述】：

我有 TinyMCE 3.5.8 版。我想调用 tinyMCE 对象，它是 tinyMCE.editors。在 Firefox 和 Chrome 中没有问题。在 IE 11 中是个问题。

if (typeof(tinyMCE) != "undefined") {
  var n = 0;
  for (var i = 0; i < tinyMCE.editors.length; i++) {
    ...
  }
}

Firefox 和 Chrome 通过循环没有问题，但问题在于 IE tinyMCE.editors.length 返回 0。

当控制台转储TinyMCE 时，我正确地看到“编辑器”，但是当您调用tinyMCE.editors 时，它返回一个空数组。

我也尝试了 tinyMCE['editors'] - IE 中的同样问题。

请帮忙。谢谢

有什么想法吗？

不过，我还是会详细描述问题。我更新了 TinyMCE - 版本 4 使用 jQuery - v1.11.3

我在没有其他javascript代码的情况下干净地尝试了代码：

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script type="text/javascript" src="https://.../js/jquery.js" ></script>
        <script type="text/javascript" src="https://.../tinymce4/tinymce.min.js" ></script>
        <script type="text/javascript" src="https://.../tinymce4/_tinymce.advanced.js" ></script>
    </head>
    <body>
    <textarea class="wysiwyg" id="a1" name="a1">

    </textarea>
    <textarea class="wysiwyg" id="a2" name="a2">

    </textarea>
    <script type="text/javascript">      
        jQuery(window).bind('load', function () {
            var editors = getTinyMCEEditors();
        });
        /**
         * Get TinyMCE Editors on page
         * @returns Object Editors Id
         */
        function getTinyMCEEditors(filterClass) {
            var ed = {};
            if (typeof(tinyMCE) != "undefined") {

   // THIS IS ERROR - return null array 
                console.log(tinyMCE.editors);

                var n = 0;
                for (var i = 0; i < tinyMCE.editors.length; i++) {
                    if ($('#' + tinyMCE.editors[i].id).hasClass(filterClass)) {
                        ed[n] = tinyMCE.editors[i].id;
                        n++;
                    }
                }
            }
            return ed;
        }

    </script>
    </body>
    </html>

console.log(tinyMCE.editors);返回空数组

【问题讨论】：

标签： javascript internet-explorer tinymce

【解决方案1】：

真正让 TinyMCE 接管这些文本区域的 init 调用在哪里？也许这只是一个时间问题？ tinymce.editors 在初始化过程完成之前不会包含任何内容。

编辑：我会尝试在init() 本身中触发你的getTinyMCEEditors() 调用 - TinyMCE 让你能够做到这一点

TinyMCE 4 代码：

tinymce.init({
    ....
    setup: function (editor) {
        editor.on('init', function () {
          //run your code here
        });
    }
    ....
}

TinyMCE 3 代码：

tinyMCE.init({
    ...
    setup : function(ed) {
        ed.onInit.add(function(ed) {
            //run your code here
        });
    }
});

由于 JavaScript 是在窗口加载时异步运行代码的，因此无法保证 TinyMCE 已完成对编辑器的初始化。将代码移动到 init 的设置并在编辑器“init”上触发它可以确保在代码运行之前编辑器就位。

【讨论】：

tinymce.editors 是这样调用的：jQuery(window).bind('load', function () {var editors = TinyMCEEditors(); });
TinyMCEEditors() 函数的代码在哪里？它不在上面的示例代码中。我在你的代码中看到的只是一个想要使用tinymce.editors 的函数......我在你的代码中没有看到的是对tinymce.init() 的任何类型的调用，这将需要在文本区域中实际调用编辑器.您在哪里以及如何为 a1 和 a2 文本区域初始化 TinyMCE？
你好，函数tinymce.init()在文件https://.../tinymce4/_tinymce.advanced.jstinymce.init({ selector: "textarea.wysiwyg", theme: "modern", plugins: [ "advlist autolink autosave link image lists charmap preview hr anchor pagebreak", "searchreplace wordcount visualblocks visualchars code media nonbreaking", "save table contextmenu directionality textcolor paste textcolor colorpicker" ], ... });中被调用
查看我上面的编辑...由于 JavaScript 是异步的，在 Window 加载时运行代码并不能保证 TinyMCE 完成了对编辑器的初始化。将代码移动到 init 的设置并在编辑器“init”上触发它可以确保在代码运行之前编辑器就位。