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。

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

1 个答案: