firefox上的JavaScript TinyMCE/jQuery竞争条件

我有一个使用TinyMCE的表单的网站；我单独使用jQuery。当我从Firefox3（MacOS X，Linux）上的暂存服务器加载表单时，TinyMCE没有完成加载。Firefox控制台中有一个错误，表示

t.getBody（）

返回了

null

t.getBody（）

，据我从TinyMCE docs了解，这是一个函数，返回文档的body元素以检查某些功能。当我使用Safari时，或者当我使用Firefox并从localhost运行同一站点时，都不会出现问题

与JavaScript相关的原始失败代码如下所示：

<script type="text/javascript" src="http://static.alfa.foo.pl/json2.js"></script>
<script type="text/javascript" src="http://static.alfa.foo.pl/jquery.js"></script>
<script type="text/javascript" src="http://static.alfa.foo.pl/jquery.ui.js"></script>
<script type="text/javascript" src="http://static.alfa.foo.pl/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
  tinyMCE.init({ mode:"specific_textareas", editor_selector:"mce", theme:"simple", language:"pl" });
</script>
<script type="text/javascript" src="http://static.alfa.foo.pl/jquery.jeditable.js"></script>
<script type="text/javascript" src="http://static.alfa.foo.pl/jquery.tinymce.js"></script>
<script type="text/javascript" charset="utf-8" src="http://static.alfa.foo.pl/foo.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    /* jQuery initialization */ });
</script>

并向

$（document）.ready（）处理程序添加了以下jQuery调用：

$(".mce").each( function(i) { tinyMCE.execCommand("mceAddControl",true,this.id); });

还是一样的错误。但是，当我添加了警惕（I）时，事情开始看起来像真正的伏都教

在调用tinyMCE.execCommand（）之前，会发出警报，并且tinyMCE textarea已正确初始化。我认为这可能是由于等待用户解除警报而引入的延迟问题，因此我通过将调用（仍在$（document）.ready（）处理程序中）更改为以下内容引入了第二个延迟：

setTimeout('$(".mce").each( function(i) { tinyMCE.execCommand("mceAddControl",true,this.id); });',1000); setTimeout（'$（“.mce”）.each（函数（i）{tinyMCE.execCommand（“mceAddControl”，true，this.id）；}）；'，1000）；

---

超时后，TinyMCE textareas将正确初始化，但这是围绕真正问题的管道胶带。问题看起来像一个明显的竞争条件（特别是当我在同一个浏览器上考虑时，但是当服务器在本地主机上时，问题不会发生）。但是JavaScript执行不是单线程的吗？有谁能告诉我这里发生了什么，实际的问题在哪里，我能做些什么来修复它吗？

浏览器按照加载而不是编写的顺序执行脚本。您的立即脚本--

tinyMCE.init（…）

和

$（document.ready（…）--可以在文件完成加载之前执行

因此，问题可能是网络延迟——特别是6个单独的脚本（每个脚本都需要浏览器和服务器之间的不同HTTP对话）。因此，浏览器可能正在尝试执行
tinyMCE.init（）
，而tiny_mce.js尚未完成解析且
tinyMCE
已完全定义

如果没有萤火虫，.；）

它有一个Net选项卡，显示加载所有脚本所需的时间


虽然你可以认为<代码> SETTIMEOUT 是管道录音，但它实际上是一个不错的解决方案。我看到的唯一问题是，它假设1秒总是可以解决的。快速连接，他们可以看到暂停。连接速度慢，而且等待时间不够长——仍然会出现错误

或者，您可以使用
window.onload
——假设jQuery尚未使用它。（其他人能证实吗？）


还有，那是直接拷贝吗

<script type="text/javascript">
  $(document).ready(function(){
    /* jQuery initialization */ }
</script>

缺少标点符号可能会造成大量损坏。解析器将继续阅读，直到找到它为止——把中间的任何东西都搞乱了。
因为这是我问自己同样问题时谷歌上出现的第一个页面，这就是我对这个问题的发现


tinyMCE中有一个回调函数，当组件加载并准备就绪时会触发该函数。您可以这样使用它：

tinyMCE.init({
   ...
   setup : function(ed) {
      ed.onInit.add(function(ed) {
          console.log('Editor is loaded: ' + ed.id);
      });
   }
});

如果您使用的是
jquery.tinymce.js
，那么就不需要
tiny_mce.js
，因为tinymce将尝试使用ajax请求加载它。如果您发现
window.tinymce
（或者简单地说
tinymce
）是
未定义的
，那么这意味着ajax尚未完成（这可能解释了为什么使用
setTimeout
对您有效）。这是事件的典型顺序：

使用脚本标记加载
jquery.js
（或谷歌加载）
使用脚本标记加载TinyMCE的jQuery插件jQuery.TinyMCE.js

文件准备事件火灾；这是您在

文本区域

s上调用

.tinymce（设置）

的地方。例如。

$（'textarea'）.tinymce（{script\u url:'/tiny\u mce/tiny\u mce.js'}）

加载

tiny_mce.js

这一步是由TinyMCE的jQuery插件为您完成的，但它可能在触发document ready事件后发生

有时您可能确实需要访问

window.tinymce

，以下是最安全的方法：

$（文档）.tinymce({ “script_url”：“/tiny_mce/tiny_mce.js” “设置”：函数（）{ 警报（tinymce）； } });

TinyMCE将创建一个

TinyMCE.Editor

对象并执行设置回调。不会触发任何编辑器事件，并且为文档创建的编辑器对象不会添加到

tinymce.editors

我还发现TinyMCE的ajax调用干扰了我的

.ajaxStop

函数，因此我还使用了

设置超时

：

$（文档）.tinymce({ “script_url”：“/tiny_mce/tiny_mce.js” “设置”：函数（）{ setTimeout（函数（）{ $（document）.ajaxStart（函数（e）{/*stuff/}）； $（document）.ajaxStop（函数（e）{/stuff*/}）； }, 0); }

---

});

最后的错字是在这里复制代码时的错字，在实际代码中是正确的。我已经编辑了这个问题

$（document）.ready（）

安装回调，在DOM树准备就绪时执行，由jQuery从

窗口调用。onload

，我想.TinyMCE对onload事件做了一些我不太理解的事情（可能与jQuery冲突？），并向文档中添加脚本标记。当错误发生时，Firebug在HTML检查器中只显示HTML标记，带有HEAD标记（无BODY），在HEAD中只显示两个脚本标记，我没有把它们放在那里。在新的onload中，您可以检查是否存在onload，并调用它。

<script type="text/javascript">
  $(document).ready(function(){
    /* jQuery initialization */ }
</script>

<script type="text/javascript">
  $(document).ready(function(){
    /* jQuery initialization */ })
</script>

tinyMCE.init({
   ...
   setup : function(ed) {
      ed.onInit.add(function(ed) {
          console.log('Editor is loaded: ' + ed.id);
      });
   }
});