1

私は、(stylescomboの代わりに)カスタムボタンを使用してベースp、h2、h3、h4フォーマットを実行するCKEditorプラグインを作成しました。これはうまく機能しますが、要素(例:'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ブロックスタイルを削除すると、段落(の)に戻る必要があると思いますenterMode=P。今のところ、上記の回避策を使用してください。

于 2013-03-11T20:54:39.917 に答える
0

はい、@ Reinmarは、this._。enterModeが定義されていないCKEditorのstyle.jsにエラーがあることを通知します。

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」ボタンを複数回クリックすると、問題が発生しました(状態は更新されませんでした)。したがって、まだ不法な解決策があります。スタイルが適用された後にコードを強制的に更新または再フィルタリングする方法はありますか?

于 2013-03-12T08:54:01.887 に答える