1

我创建了一个 CKEditor 插件，它使用自定义按钮（而不是样式组合）进行基本的 p、h2、h3、h4 格式设置。它工作得很好，但是如果我取消选中一个元素（例如'h2'），将'div'标签设置为该行的父元素。我想将“p”作为默认元素，并且不能取消选中“p”按钮（除非我单击另一个，例如“h2”按钮）。这怎么可能？

该插件看起来像：

CKEDITOR.plugins.add('stylesbuttons_custom',{
    lang:'en',
    icons:'p,h2,h3,h4',
    init:function(editor){
        var order=0;
        var addButtonCommand=function(buttonName,buttonLabel,commandName,styleDefiniton){
                if (!styleDefiniton)
                    return;
                var style=new CKEDITOR.style(styleDefiniton);
                editor.attachStyleStateChange(style,function(state){
                    !editor.readOnly && editor.getCommand(commandName).setState(state);
                });
                editor.addCommand(commandName,new CKEDITOR.styleCommand(style));
                if (editor.ui.addButton){
                    editor.ui.addButton(buttonName,{
                        label:buttonLabel,
                        command:commandName,
                        toolbar:'basicstyles,'+(order+=10)
                    });
                }
            };
        var lang=editor.lang.stylesbuttons_custom;

        addButtonCommand('P',lang.p,'p',{element:'p'});
        addButtonCommand('H2',lang.h2,'h2',{element:'h2'});
        addButtonCommand('H3',lang.h3,'h3',{element:'h3'});
        addButtonCommand('H4',lang.h4,'h4',{element:'h4'});
    }
});

我像这样加载插件：

config.extraPlugins='stylesbuttons_custom';

我将按钮放在工具栏上，例如：

config.toolbar:[['P','H2','H3','H4','Pre']];

这是有关该问题的屏幕截图： 在此处输入图像描述

4

2 回答 2

3

从CKEditor 论坛交叉发布我的答案。

我认为您需要编写自己的命令而不是使用CKEDITOR.styleCommand.

CKEDITOR.styleCommand它应该与样式尚未应用于当前选择时完全相同。

但是当再次点击它应该应用段落样式，而不是删除以前应用的样式。例如：

styleCommand.prototype.exec = function( editor ) {
    editor.focus();

    if ( this.state == CKEDITOR.TRISTATE_OFF )
        editor.applyStyle( this.style );
    else if ( this.state == CKEDITOR.TRISTATE_ON )
        editor.applyStyle( paragraphStyle );
};

PS。我创建了一张票：http ://dev.ckeditor.com/ticket/10190 ，因为我认为删除块样式应该恢复到段落（in enterMode=P）。现在使用上述解决方法。

于 2013-03-11T20:54:39.917 回答
0

是的，@Reinmar 通知 CKEditor 的 style.js 中有一个错误，其中 this._.enterMode 没有定义。

在 style.js 上执行此操作，解决问题：

this._ = {
  definition: styleDefinition,
  enterMode: CKEDITOR.config.enterMode
};

从现在开始，当取消选中样式按钮时，块将更改为默认的“p”元素。

现在我完整的工作插件看起来像：

(function(){
CKEDITOR.plugins.add('custombuttons',{
    lang:'hu,en,de,ro',
    init:function(editor){

        var order=0,t=this,lang=editor.lang.custombuttons;

        // addButtonCommand helper
        var addButtonCommand=function(buttonName,buttonLabel,commandName,styleDefiniton){
            var style=new CKEDITOR.style(styleDefiniton);
            var styleCommand=function(style){
                this.style=style;
                this.allowedContent=style;
                this.requiredContent=style;
                this.contextSensitive=true;
            };
            styleCommand.prototype={
                exec:function(editor){
                    editor.focus();
                    if (this.state==CKEDITOR.TRISTATE_OFF)
                        editor.applyStyle(this.style);
                    else if (this.state==CKEDITOR.TRISTATE_ON)
                        editor.removeStyle(this.style);
                    if(commandName!='fakecommand'){editor.execCommand('fakecommand');editor.execCommand('fakecommand');} /* hack to change button state properly */
                },
                refresh:function(editor,path){
                    this.setState(path&&this.style.checkApplicable(path)?(this.style.checkActive(path)?CKEDITOR.TRISTATE_ON:CKEDITOR.TRISTATE_OFF):CKEDITOR.TRISTATE_DISABLED);
                }
            };
            editor.addCommand(commandName,new styleCommand(style));
            if(editor.ui.addButton){editor.ui.addButton(buttonName,{label:buttonLabel,command:commandName,toolbar:'basicstyles,'+(order+=10),icon:t.path+'images/'+commandName+'.png'});}
        };

        // _fakebutton (hack)
        addButtonCommand('_fakebutton','','fakecommand',{element:'span'});

        // style buttons
        addButtonCommand('P',lang.p,'p',{element:'p'});
        addButtonCommand('H2',lang.h2,'h2',{element:'h2'});
        addButtonCommand('H3',lang.h3,'h3',{element:'h3'});
        addButtonCommand('H4',lang.h4,'h4',{element:'h4'});
        addButtonCommand('Pre',lang.pre,'pre',{element:'pre'});
        addButtonCommand('Mini',lang.mini,'mini',{element:'p',attributes:{class:'mini'}});
        addButtonCommand('Important',lang.important,'important',{element:'span',attributes:{class:'important'}});
        addButtonCommand('Comment',lang.comment,'comment',{element:'span',attributes:{class:'comment'}});
        addButtonCommand('Mark',lang.mark,'mark',{element:'mark'});
        addButtonCommand('ImgLeft',lang.imgLeft,'imgLeft',{element:'img',attributes:{class:'imgleft'}});
        addButtonCommand('ImgRight',lang.imgRight,'imgRight',{element:'img',attributes:{class:'imgright'}});
        addButtonCommand('ImgCenter',lang.imgCenter,'imgCenter',{element:'img',attributes:{class:'imgcenter'}});

        // button shortcut keys
        editor.setKeystroke(
        [
            [CKEDITOR.CTRL+48,'p'], // Ctrl+0
            [CKEDITOR.CTRL+49,'h2'], // Ctrl+1
            [CKEDITOR.CTRL+50,'h3'], // Ctrl+2
            [CKEDITOR.CTRL+51,'h4'], // Ctrl+3
        ]);
    }
});
})();

代码中仍然存在 hack。我需要运行一个“假命令”来真正更新（重新过滤？）更改的标签及其所有父标签。例如，“p.mini”按钮在多次单击时会导致问题（状态未更新）。所以仍然有一个不优雅的解决方案。知道如何在应用样式后强制更新或重新过滤代码吗？

于 2013-03-12T08:54:01.887 回答