2

以下のコードは、tinyMCE エディター ツールバーのボタン クリックに応答し、ソース マークアップのキャレット位置に <--nextpage--> タグを追加します。

これはうまくいきます。

ただし、ソース ビューをクリックしてからビジュアルに戻るまで、プレースホルダーが挿入されたことを確認する方法はありません。

クリックしてテキスト ビューに移動し、wysiwyg に戻ると、コンテンツ内の <--nextpage--> 要素を示すために wordpress が挿入する wysiwyg プレースホルダー グラフィックが表示されます。

[Insert More Tag] ボタンをクリックすると、WordPress エディターが tinyMCE エディター ビューを更新して、"more tag" プレースホルダー グラフィックを表示することに気付きました (ユーザーがビューを切り替える必要はありません)。

おそらく、同じことを行うために以下の関数で呼び出すことができる execCommand がありますか? mceRepaint はそれを行っていません。

(function() {
    tinymce.create('tinymce.plugins.nextpage', {
        init : function(ed, url) {
            ed.addButton('nextpage', {
                title : 'Next Page Button',
                image : url+'/images/btn_nextpage.png',
                onclick : function() {
                    var prompt_text = "<!--nextpage-->";
                    var caret = "caret_pos_holder";
                    var insert = prompt_text + "<span id="+caret+"></span>";
                    ed.execCommand('mceInsertContent', false, insert);
                    ed.selection.select(ed.dom.select('span#caret_pos_holder')[0]); //select the span
                    ed.dom.remove(ed.dom.select('span#caret_pos_holder')[0]); //remove the span
                    ed.execCommand("mceRepaint"); //DOES NOT REFRESH THE LIVE VIEW

                }
            });
        },
        createControl : function(n, cm) {
            return null;
        },
    });
    tinymce.PluginManager.add('nextpage', tinymce.plugins.nextpage);
})();

更新: Chrome の開発ツールを使用して、WordPress の [Insert More Tag] ボタンをクリックしたときに何が起こっているかを追跡しようとしていますが、何も表示されません。そのボタンがクリックされて目的の結果が得られたときに内部で何が起こっているかを確認できるように、その情報を公開したいと思います。

4

1 に答える 1

4

insert ステートメントの後に次のコマンドを追加することで、機能させることができました。

tinymce.activeEditor.setContent(tinymce.activeEditor.getContent());

(mceRepaint ステートメントの代わりに)

于 2012-12-23T22:31:56.230 に答える