Javascript CKEditor styleCommand的默认样式（使用按钮格式化样式）_Javascript_Ckeditor

Javascript CKEditor styleCommand的默认样式（使用按钮格式化样式）

javascript ckeditor

Javascript CKEditor styleCommand的默认样式（使用按钮格式化样式）,javascript,ckeditor,Javascript,Ckeditor,我创建了一个CKEditor插件，它使用自定义按钮（而不是stylescombo）进行基本的p、h2、h3、h4格式设置。它工作得很好，但是如果我取消选中一个元素（例如“h2”），就会将“div”标记设置为该行的父元素。我希望将“p”作为默认元素，并且不能取消选中“p”按钮（除非我单击另一个按钮，例如“h2”按钮）。这怎么可能该插件看起来像： CKEDITOR.plugins.add('stylesbuttons_custom',{ lang:'en', icons:'p,h2

我创建了一个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'});
    }
});

(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
        ]);
    }
});
})();

我像这样加载插件：

config.extraPlugins='stylesbuttons_custom'
我将按钮放在工具栏上，如下所示：
config.toolbar:[[p'、'H2'、'H3'、'H4'、'Pre']
以下是有关该问题的屏幕截图：
交叉发布我的答案
我认为您需要编写自己的命令，而不是使用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 );
};

我创建了一个记录单：因为我认为删除块样式应该恢复到段落（在enterMode=p
中）。现在使用上述解决方法。
是，@Reinmar通知CKEditor的style.js中有一个错误，其中未定义this.\inermode
在style.js上执行此操作时，请解决以下问题：
this._ = {
  definition: styleDefinition,
  enterMode: CKEDITOR.config.enterMode
};

从现在起，当样式按钮被取消选中时，块将更改为默认的“p”元素
现在，我的完整工作插件如下所示：
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'});
    }
});

(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”来真正更新（refilter？）已更改的标记及其所有父标记。例如，“p.mini”按钮在多次单击时会导致问题（状态未更新）。因此，仍然有一个不公平的解决办法。你知道如何在应用样式后强制更新或重新过滤代码吗