7

TinyMCE を使用するフォームを含む Web サイトがあります。独立して、私はjQueryを使用しています。Firefox 3 (MacOS X、Linux) でステージング サーバーからフォームをロードすると、TinyMCE のロードが完了しません。がt.getBody()返されたというエラーが Firefox コンソールに表示されますnull。 t.getBody()TinyMCE docs から理解できる限り、ドキュメントの body 要素を返し、いくつかの機能について検査する関数です。Safari を使用している場合や、localhost から実行されている同じサイトで Firefox を使用している場合は、問題は発生しません。

元の失敗した 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>

スクリプトの読み込み順、移動を変えてみたtinyMCE.init() call to the <script/> tag containing $(document).ready() call—before, after, and inside this call. No result. When tinyMCE.init() was called from within $(document).ready() handler, the browser did hang on request—looks like it was too late to call the init function.

Then, after googling a bit about using TinyMCE together with jQuery, I changed tinyMCE.init() call to:

tinyMCE.init({ mode:"none", theme:"simple", language:"pl" });

and added following jQuery call to the $(document).ready() handler:

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

Still the same error. But, and here's where things start to look like real voodoo, when I added alert(i); before the tinyMCE.execCommand()呼び出し、アラートが発生し、TinyMCE テキストエリアが正しく初期化されました。これは、ユーザーがアラートを閉じるのを待つことによって生じる遅延の問題である可能性があると考えたので、呼び出しを $(document).ready() ハンドラー内で次のように変更することで、1 秒の遅延を導入しました。

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

タイムアウトにより、TinyMCE テキストエリアは正しく初期化されますが、実際の問題はダクトテープで囲んでいます。問題は明らかな競合状態のように見えます (特に、同じブラウザーで考えた場合、サーバーが localhost にある場合、問題は発生しません)。しかし、JavaScript の実行はシングルスレッドではありませんか? ここで何が起こっているのか、実際の問題はどこにあるのか、実際に修正するにはどうすればよいのか、誰か教えてください。

4

3 に答える 3

5

ブラウザーはスクリプトを、書き込まれた順序ではなく、読み込まれた順序で実行します。ファイルの読み込みが完了する前に、即時スクリプトをtinyMCE.init(...)実行$(document.ready(...));できます。

したがって、問題はおそらくネットワーク レイテンシです。特に 6 つの個別のスクリプト (ブラウザとサーバーの間でそれぞれ異なる HTTP 通信が必要です) の場合は特にそうです。したがって、tiny_mce.jsの解析が完了して完全に定義されるtinyMCE.init()前に、ブラウザーが実行を試みている可能性があります。tinyMCE

Firebug を持っていない場合は、入手してください。;)すべてのスクリプトの読み込みにかかる時間を表示する [ネット
] タブ があります。

ダクトテーピングだと思うかもしれませんがsetTimeout、実際にはまともな解決策です. 私が見る唯一の問題は、1秒が常に修正されると想定していることです。接続が速く、一時停止が見られました。接続が遅く、十分に長く待機していません -- それでもエラーが発生します。

または、使用できる場合がありますwindow.onload-jQueryがまだ使用していないと仮定します。（誰か確認してくれませんか？）

window.onload = function () {
    tinyMCE.init(...);

    $(document).ready(...);
};

また、それは直写でしたか？

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

)エンディングがありませんready:

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

句読点の欠落は、多くの損害を引き起こす可能性があります。パーサーは、それが見つかるまで読み取りを続けます。その間に何かを台無しにします。

于 2008-12-07T03:17:15.393 に答える
2

これは、同じ質問をしたときに Google に表示された最初のページであるため、この問題について私が見つけたのはこれです。

ソース

コンポーネントがロードされて準備ができたときに起動されるtinyMCEのコールバック関数があります。次のように使用できます。

tinyMCE.init({
   ...
   setup : function(ed) {
      ed.onInit.add(function(ed) {
          console.log('Editor is loaded: ' + ed.id);
      });
   }
});
于 2010-02-19T14:41:31.460 に答える
1

TinyMCE は ajax リクエストでロードしようとするため、使用している場合jquery.tinymce.jsは必要ありません。が(または単に) でtiny_mce.jsあることがわかっている場合、これは ajax がまだ完成していないことを意味します (これは、使用がうまくいった理由を説明している可能性があります)。これはイベントの典型的な順序です:window.tinymcetinymceundefinedsetTimeout

  1. jquery.jsスクリプト タグ (または google load) を使用して読み込みます。
  2. jquery.tinymce.jsスクリプト タグを使用して、TinyMCE の jQuery プラグインをロードします。

  3. ドキュメント準備完了イベントが発生します。.tinymce(settings)これはあなたがあなたのを呼び出す場所ですtextarea。例えば $('textarea').tinymce({ script_url: '/tiny_mce/tiny_mce.js' })

  4. このステップはTinyMCEtiny_mce.jsの jQuery プラグインによって自動的に実行されますが、ドキュメントの準備完了イベントが発生した後に発生する可能性があります。

本当に にアクセスする必要がある場合がありますwindow.tinymce。最も安全な方法は次のとおりです。

$(document).tinymce({ 'script_url': '/tiny_mce/tiny_mce.js' 'setup': function() { alert(tinymce); } });

tinymce.EditorTinyMCE は、オブジェクトを作成し、setup コールバックを実行するところまで行きます。エディターのイベントはトリガーされず、ドキュメント用に作成されたエディター オブジェクトは に追加されませんtinymce.editors。

また、TinyMCE の ajax 呼び出しが私の.ajaxStop機能に干渉していることもわかったので、以下も使用しましたsetTimeout。

$(document).tinymce({ 'script_url': '/tiny_mce/tiny_mce.js' 'setup': function() { setTimeout(function () { $(document).ajaxStart(function(e) {/* もの/ }); $(document).ajaxStop(function(e) {/ stuff */}); }, 0); } });

于 2011-06-11T17:45:26.177 に答える