1

我很困扰。

我创建了以下位于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>
4

2 回答 2

3

TinyMCE doesn't do all of the setup work immediately when you call init. It provides a callback, setup, to tell you when the work is done.

So if you provide a setup callback, you can interact with the editor instance then.

Here's an example (I've also moved your scripts to the end, 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>

Now, if you want to actually access the editor instance, bizarrely TinyMCE doesn't add it to tinymce.editors until after calling the setup function. But if you throw in a brief yield, you're all set. Here's the above with a changed setup function:

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

So why did it work on jsFiddle? Well, jsFiddle has a truly brain dead surprising default setting, which is to put all of your script in a window#load callback function. window#load happens very late in the load process, after all external resources have been loaded. (You can see that in the jsFiddle UI, it's the second drop-down list on the left.) So apparently TinyMCE was completely ready at that point, where it isn't earlier in the cycle.

Side note: 99.9% of the time, there is absolutely no point in supplying a tag name with an id selector, e.g. textarea#ta1. id values are unique, so you don't have to qualify them unless you explicitly want to avoid matching an element that may sometimes have one tag name, or other times have another, which is a pretty unusual use case.

于 2013-05-16T14:41:02.313 回答
-1

在 tinyMCE 实际加载之前，您的脚本很有可能正在运行。可能是它从您的测试站点加载得更快，这就是它起作用的原因。

用作快速检查。

于 2013-05-16T14:41:58.660 回答