ckeditor - CKEditor: ツールバー ボタンで Entermode を制御する

Question

デフォルトでは、CKEditor の Enter キーの動作は、<p>タグの追加と新しい段落の開始です。ただし、その動作は、.EnterModeパラメーターを使用して構成で変更できます。

Wordのように、ツールバーにボタンを配置して、<p>と（1行と2行）を切り替えることにより、ランタイムでEnterキーの動作を変更する方法があるかどうか疑問に思っています。<br>

これを行う方法についてのアイデアはありますか？

Answer 1

以下を に保存しますeditor_dir/plugins/entermode/plugin.js。

'use strict';

(function() {
    CKEDITOR.plugins.add( 'entermode', {
        icons: 'entermode',
        init: function( editor ) {
            var enterP = new enterModeCommand( editor, CKEDITOR.ENTER_P );
            var enterBR = new enterModeCommand( editor, CKEDITOR.ENTER_BR );

            editor.addCommand( 'entermodep', enterP );
            editor.addCommand( 'entermodebr', enterBR );

            if ( editor.ui.addButton ) {
                editor.ui.addButton( 'EnterP', {
                    label: 'Enter mode P',
                    command: 'entermodep',
                    toolbar: 'paragraph,10'
                });

                editor.ui.addButton( 'EnterBR', {
                    label: 'Enter mode BR',
                    command: 'entermodebr',
                    toolbar: 'paragraph,20'
                });
            }

            editor.on( 'dataReady', function() {
                refreshButtons( editor );
            });
        }
    });

    function refreshButtons( editor ) {
        editor.getCommand( 'entermodep' ).setState(
            editor.config.enterMode == CKEDITOR.ENTER_P ? CKEDITOR.TRISTATE_ON : CKEDITOR.TRISTATE_OFF );

        editor.getCommand( 'entermodebr' ).setState(
            editor.config.enterMode == CKEDITOR.ENTER_BR ? CKEDITOR.TRISTATE_ON : CKEDITOR.TRISTATE_OFF );
    }

    function enterModeCommand( editor, mode ) {
        this.mode = mode;
    }

    enterModeCommand.prototype = {
        exec: function( editor ) {
            editor.config.enterMode = this.mode;
            refreshButtons( editor );
        },

        refresh: function( editor, path ) {
            refreshButtons( editor );
        }
    };
})();

toolbar.css次に、スキン ファイルに次の行を追加します。

.cke_button__enterp_icon, .cke_button__enterbr_icon { display: none !important; }
.cke_button__enterp_label, .cke_button__enterbr_label { display: inline !important; }

...または、必要に応じてアイコンをペイントします。

エディターの実行時にプラグインを有効にします。

CKEDITOR.replace( 'id', { extraPlugins: 'entermode' } );

config.enterModeツールバーから制御できるようになりました。