点击按钮获取tinyMCE编辑器实例

时间:2012-08-24 09:30:33

标签: javascript jquery tinymce

编辑:添加了一个小提琴示例 - http://fiddle.tinymce.com/EZbaab/2

我目前有一个页面上有一个tinyMCE实例和三个单独的textareas继承它。

我有一个自定义菜单,其上有可点击的子菜单项(使用Django生成),点击后,将内容插入当前活动的tinyMCE编辑器(textarea)。麻烦的是,无论单击哪个编辑器工具栏,都会发生这种情况。因此,例如,如果我单击顶部编辑器的工具栏项,但是底部编辑器聚焦,则文本将粘贴到底部编辑器中。

我需要强制单击菜单项时单击其工具栏的编辑器会聚焦(对于默认按钮,如粗体,斜体,下划线,但不适用于我的自定义菜单项)

或者我需要将被点击的编辑器的实例ID传递给以某种方式粘贴在文本中的函数。困难在于我很难在文档中找到对这两个任务的任何引用。

tinyMCE初始化代码:

tinyMCE.init({
    forced_root_block : false,
    force_br_newlines : true,
    force_p_newlines : false,
    mode : "textareas",
    theme : "advanced",
    plugins : "contextmenu,paste,save,-stdpara",
    theme_advanced_buttons1 : ",bold,italic,underline,cleanup,|,undo,redo,|,cut,copy,paste,|,stdpara",
    theme_advanced_buttons2 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    force_br_newlines : true,
    force_p_newlines : false,
    forced_root_block : '',
});    

(stdpara是我的自定义菜单插件):

菜单代码(剥离了django并添加了一些随机数据:

tinymce.create('tinymce.plugins.StandardParagraphPlugin', {
    createControl: function(n, cm) {
        switch (n) {
            case 'stdpara':
                var c = cm.createSplitButton('stdparagraph', {
                    title : 'Standard Paragraph',
                image : 'img/para.png',
                });

                c.onRenderMenu.add(function(c, m) {
                    m.add({title : 'Standard Paragraphs', 'class' : 'mceMenuItemTitle'}).setDisabled(1);
                    category_menu = m.addMenu({title : 'Some Title'});
                    category_menu.add({title : 'Some sub-title', onclick : function() { tinyMCE.activeEditor.execCommand('mceInsertContent',false,'The Text') }); 
                    }});
                return c;
            }
        return null;
    }
});

3 个答案:

答案 0 :(得分:2)

  

我需要强制点击工具栏的编辑器   单击一个菜单项时会聚焦(这发生在   默认按钮,如粗体,斜体,下划线,但不适合我的自定义   菜单项)

这是正确的,但问题出在这里

tinyMCE.activeEditor.execCommand('mceInsertContent',false,'The Text')

这将在活动编辑器上执行命令。例如,当用户点击编辑器时,tinyMCE.activeEditor会重置。

最好解决下拉列表所属的编辑器。 它有点棘手,看起来并不优雅,但只要tinymce不改变按钮逻辑并命名它将成为tinymce更新的证据。在这里看到我的小小提琴:http://fiddle.tinymce.com/IZbaab/1

答案 1 :(得分:1)

未来的问题排查工具

createControl的第二个参数(n,cm) - 所以,'cm'参数是contentManager。

要获取当前编辑器,只需拨打cm.editor

即可

要插入内容:cm.editor.execCommand('mceInsertContent', false, 'my text')

答案 2 :(得分:1)

不知道是否有帮助,但我选择了相应的文字字段,如:

tinyMCE.get('yourtextareaid').execCommand('mceInsertContent', false, 'bla');