1

私はtinymce edit iframeを取得して、この素晴らしいtabbifierで動作させようとしています:

http://www.barelyfitz.com/projects/tabber

私はそれらの両方を正常にインストールしましたが、うまく機能しています。

私の例では、次のことをテストしました。

  1. tinymce コンポーネントをロードし、HTML オプションを使用して次のコードを tinymce iframe 内に保存します。
  2. F5 で更新した後、結果は完全に保存され、このコードはデータベースに保存されます。
<p>test</p>

tinymce は完璧に動作しています。

私が行った次のテストは、タブバーを使用したものです。

  1. tinymce コンポーネント ボックスを編集し、HTML オプションを使用して次のコードを保存します。
<div class='tabber' id='tabber1'>
    <div class='tabbertab' title='FIRSTTAB' >
        test firsttab
    </div>
    <div class='tabbertab' title='SECONDTAB' >
        test secondtab
    </div>
</div>

  1. コードはデータベースに完全に保存され、結果は出力ビューに完全に読み込まれ、2 つのタブが表示され、それぞれにコンテンツが表示されます。

  2. 問題は、tinymce でコンテンツを再度編集しようとすると、タブが表示されないことです。コンテンツは、タブなしで tinymce iframe に完全に読み込まれます。以下のように表示されます。

    最初のタブをテストする

    セカンドタブのテスト

内部の HTML コードは良好で、適切な tabbifier html コードが以前に保存されています。

問題は、tinymce の iframe が tabber.js の javascript をロードまたは解釈できず、タブが表示されないことです。このコードを使用して、tinymce iframe 内に tabber.js の javascript をロードすることをテストしましたが、ロードしているように見えますが、タブはまだ表示されていません。

<script type="text/javascript">
      tinyMCE.init({
        mode:                              "exact",
        elements:                          "%s",
        theme:                             "%s",
        %s
        %s
        theme_advanced_toolbar_location:   "top",
        theme_advanced_toolbar_align:      "left",
        theme_advanced_statusbar_location: "bottom",
        theme_advanced_resizing:           true
        %s
            setup : function(ed)
            {
                ed.onInit.add(function(ed, evt)
                {
                    alert("entered tiny");
                    // Load a script from a specific URL using the global script loader
                    //tinymce.ScriptLoader.load('/js/tabber/tabber.js');
                    // Load a script using a unique instance of the script loader
                    //var scriptLoader = new tinymce.dom.ScriptLoader();
                    //scriptLoader.load('C:\tabber.js');

                    // Load multiple scripts
                    var scriptLoader = new tinymce.dom.ScriptLoader();
                    scriptLoader.add('/js/tabber.js');
                    scriptLoader.loadQueue(function() { alert('All scripts are now loaded.'); });
                });
            }
      });
</script>

/js/tabber.js が正しいパスであることも確認しました。そして、firebugでそれを読み込んでいるのを見ました。アラートメッセージが2つ表示されたので読み込んでいるようですが、まだtinymce edit iframe内のタブが表示されていません。

どんな助けでも大歓迎です、どうもありがとう。

4

2 に答える 2

4

tinymce ScriptLoaderは、iframe 内にスクリプトをロードしません。tinymce の初期化後にメイン ウィンドウにスクリプトをロードする方法を提供します。文書化されていないため、これは非常に紛らわしいです。

ただし、iframe 内にスクリプトをロードすることはできます。ここに魔法があります：

tinymce.init( { setup : function( ed ) {
    ed.on('init', function (args) {
        // get the iframe DOM
        var doc = args.target.contentDocument || args.target.contentWindow.document;

        // inject script into the DOM
        var s = doc.createElement('script');
        s.type = 'text/javascript';
        s.src = '/js/tabber.js';
        doc.getElementsByTagName('head')[0].appendChild(s);
    });
});
于 2014-06-19T01:45:48.087 に答える
0

いくつかのブラウザーでは、段落の開始時にスペースとタブを使用すると問題が発生します。スペースの回避策は、スペースが先頭にある場合、onSave を保護されたスペースとしてコーディングすることです。タブの解決策は、同様の動作を持つ別の文字を使用し、保存時にそれらを置き換えることです。データベースからエディターにリロードするときに、コンテンツを再コーディングする必要があります。

于 2012-10-16T15:02:28.213 に答える