Question

我创建了一个CKEditor插件，它使用自定义按钮（而不是stylescombo）执行基本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']];

以下是有关此问题的屏幕截图： enter image description here

Answer 1

从CKEditor forum交叉发布我的回答。

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

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

但是再次点击它时应该应用段落样式，而不是删除以前应用的样式。 E.g：

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因为我认为删除块样式应该还原为段落（在enterMode=P中）。目前使用上述解决方法。

Answer 2

是的，@ Reinmar通知CKEditor的style.js中存在错误，其中没有定义._。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
        ]);
    }
});
})();

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

style命令的CKEditor默认样式（带按钮的格式样式）

2 个答案: