2

下面的代码响应 tinyMCE 编辑器工具栏上的按钮单击，并将 <--nextpage--> 标记添加到插入符号位置的源标记中。

这很好用。

但是，在我单击源视图，然后返回视觉之前，无法判断占位符已插入。

一旦我点击文本视图，然后返回所见即所得，我就可以看到 wordpress 插入的所见即所得占位符图形，以表示内容中的 <--nextpage--> 元素。

我注意到，当我单击“插入更多标签”按钮时，WordPress 编辑器会以某种方式更新 tinyMCE 编辑器视图以显示“更多标签”占位符图形（无需用户切换视图）。

也许有一个 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“插入更多标签”按钮时发生的情况，但它没有向我显示任何内容。我希望公开这些信息，以便在单击该按钮以获得所需结果时可以看到引擎盖下发生了什么。

4

1 回答 1

4

我可以通过在我的插入语句之后添加这个命令来让它工作：

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

（而不是 mceRepaint 语句）

于 2012-12-23T22:31:56.230 回答