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 は、 を呼び出したときにすべてのセットアップ作業をすぐに実行するわけではありませんinit。setup作業が完了したことを知らせるコールバック を提供します。

したがって、setupコールバックを提供すると、エディター インスタンスと対話できます。

例を次に示します (スクリプトも最後に移動しました。これはベストプラクティスに関係なく):

実例| ライブソース

<!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 は関数を呼び出すtinymce.editorsまでそれを追加しません。しかし、簡単な収量を投入すれば、準備は万端です。上記の関数を変更したものを次に示します。setupsetup

ライブコピー| ライブソース

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 には、すべてのスクリプトをコールバック関数に入れるという、本当に脳死状態の 驚くべきデフォルト設定があります。すべての外部リソースがロードされた後、ロード プロセスの非常に遅い段階で発生します。(jsFiddle UI では、左側の 2 番目のドロップダウン リストであることがわかります。) したがって、TinyMCE はその時点で完全に準備ができていたようで、サイクルの初期段階ではありません。window#loadwindow#load

id補足: 99.9% の確率で、タグ名にセレクターを指定してもまったく意味がありませんtextarea#ta1。id値は一意であるため、1 つのタグ名を持つ場合もあれば、別のタグ名を持つ場合もある要素との一致を明示的に避けたい場合を除き、値を修飾する必要はありません。これは非常に珍しい使用例です。

于 2013-05-16T14:41:02.313 に答える
-1

tinyMCE が実際に読み込まれる前に、スクリプトが実行される可能性が高くなります。テスト サイトからの読み込みが速くなるため、機能する可能性があります。

クイックチェックとしてご利用ください。

于 2013-05-16T14:41:58.660 に答える