javascript - JavaScript对象属性“有时”未定义

我很困扰。

我创建了位于http://tapmeister.com/test/dom.html的以下脚本。由于某些未知的原因，tinymce.editors.ta1和tinymce.editors [0]显示为未定义，并且尝试在其下使用方法会导致错误。但是，当我使用FireBug检查tinymce或tinymce.editors时，在DOM中会看到它们。

因此，我创建了一个jsfiddle http://jsfiddle.net/JWyWM/来向人们展示stackoverflow。但是，当我对其进行测试时，tinymce.editors.ta1和tinymce.editors [0]不再是未定义的，并且这些方法可以正常工作而不会出错。

到底是怎么回事？？？也许与公共/保护/私有财产有关？如何访问诸如tinymce.editors.ta1.hide()之类的方法？谢谢！！！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
        <title>Testing</title>
        <script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
        <script type="text/javascript">
            tinymce.init({selector: "textarea#ta1"});
            tinymce.init({selector: "textarea#ta2"});
            console.log(tinymce);
            console.log(tinymce.editors);
            console.log(tinymce.editors.ta1);
            console.log(tinymce.editors[0]);
            //tinymce.editors.ta1.hide();
            //alert('pause');
            //tinymce.editors.ta1.show();
        </script>
    </head>

    <body>
        <form>
            <textarea id="ta1"></textarea>
            <textarea id="ta2"></textarea>
        </form>
    </body>
</html>

最佳答案

调用init时，TinyMCE不会立即完成所有设置工作。它提供了一个回调setup来告诉您工作何时完成。

因此，如果提供setup回调，则可以与编辑器实例进行交互。

这是一个示例（我也将您的脚本移到了which is best practice regardless的最后）：

Live Example | Live Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
        <title>Testing</title>
    </head>

    <body>
        <form>
            <textarea id="ta1"></textarea>
            <textarea id="ta2"></textarea>
        </form>
        <script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
        <script type="text/javascript">
            tinymce.init({
                selector: "#ta1, #ta2",
                setup:    function(e) {
                    console.log("Editor " + e.id + " is ready");
                }
            });
        </script>
    </body>
</html>

现在，如果您想实际访问编辑器实例，则在调用tinymce.editors函数之后，TinyMCE才将其添加到setup中。但是，如果您提供简短的收益，那么一切都准备就绪。这是上面的内容，其中setup函数已更改：

Live Copy | Live Source

setup:    function(e) {
  // Bizarrely, TinyMCE calls `setup` *before* adding
  // the relevant editor to `tinymce.editors`,
  // so we have to yield briefly
  console.log("Editor " + e.id + " is ready");
  if (e.id === "ta2") {
    console.log("It's ta2, I'll hide it in a moment.");
    setTimeout(function() {
      tinymce.editors[e.id].hide();
    }, 0);
  }
}

那为什么在jsFiddle上起作用呢？好吧，jsFiddle具有令人惊讶的默认设置，它会将所有脚本放入window#load回调函数中。 window#load发生在加载所有外部资源之后的很晚的加载过程中。（您可以在jsFiddle UI中看到它，这是左边的第二个下拉列表。）因此，显然TinyMCE那时已经完全准备好了，在周期中还不算早。

旁注：99.9％的时间，用id选择器提供标签名称绝对没有意义，例如textarea#ta1。 id值是唯一的，因此除非您明确地希望避免与有时可能具有一个标签名称的元素匹配，或者有时却具有另一个标签名称的元素，则不必对它们进行限定，这是非常不寻常的用例。

关于javascript - JavaScript对象属性“有时”未定义，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16590419/

tinyMCE

javascript - JavaScript对象属性“有时”未定义