ckeditor - CKEditor：使用工具栏按钮控制 Entermode

Question

默认情况下，CKEditor 的回车键行为是添加一个<p>标签并开始一个新段落。但是可以在配置中使用.EnterMode参数修改该行为。

我想知道是否有一种方法可以更改运行时中的 Enter 键行为，方法是在其工具栏中放置一个按钮，在<p>和<br>（单行与双行）之间切换，就像在 Word 中一样。

关于如何做到这一点的任何想法？

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从工具栏进行控制。