CKEditor 工具栏配置

CKEditor 是一个流行的富文本编辑器，它的工具栏可以定制以满足不同的需求。本文将介绍如何通过配置工具栏来改变 CKEditor 的外观和行为。

工具栏的基本结构

首先，我们要了解 CKEditor 工具栏的基本结构。它由一个包含所有工具栏按钮的容器和一个包含操作按钮的下拉菜单组成。所有工具栏按钮都被包装在一个 div 元素中，并使用 a 元素作为按钮标识符。

配置工具栏

CKEditor 的工具栏可以通过多种方式进行配置，包括：

1. 预定义的工具栏样式
2. 自定义工具栏样式
3. 可配置的工具栏按钮

预定义的工具栏样式

CKEditor 提供了几种预定义的工具栏样式，例如“基本”、“全”、“默认”、“自定义”等。它们可以通过配置文件或代码进行设置。例如，要使用“默认”工具栏样式：

CKEDITOR.replace( 'editor1', {
    toolbar: 'Default'
} );

自定义工具栏样式

除了预定义的工具栏样式，我们还可以创建自定义的工具栏样式。例如，下面的代码创建了一个名为“myToolbar”的自定义工具栏样式：

CKEDITOR.replace( 'editor1', {
    toolbar: 'myToolbar'
} );

CKEDITOR.config.toolbar_myToolbar = [
    { name: 'document', groups: [ 'mode' ], items: [ 'Source', '-', 'Save', 'NewPage', 'DocProps', 'Preview' ] },
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
    { name: 'editing', groups: [ 'find', 'selection' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
    '/',
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ] },
    { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
    { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] },
    '/',
    { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
    { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
    { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] }
];

在这个样式中，我们可以看到每个工具栏按钮的名称和组，这些值是可配置的。

可配置的工具栏按钮

CKEditor 还提供了一些可配置的工具栏按钮，它们可以通过代码进行设置以控制它们的行为和外观。下面是一些常见的配置选项：

• name: 按钮的名称
• label: 按钮的标签
• command: 执行按钮点击操作的命令
• icon: 按钮的图标
• group: 按钮所属的组
• items: 组包含的其他按钮

例如，要添加一个名为“myButton”的自定义按钮：

CKEDITOR.dtd.$removeEmpty['span'] = false;
CKEDITOR.plugins.add( 'myButton', {
    icons: 'myButton',
    init: function( editor ) {
        editor.addCommand( 'myButton', {
            exec: function( editor ) {
                var selection = editor.getSelection();
                var element = CKEDITOR.dom.element.createFromHtml( '<span style="color:red">red</span>' );
                editor.insertElement( element );
            }
        } );

        editor.ui.addButton( 'MyButton', {
            label: 'Insert Red',
            command: 'myButton',
            toolbar: 'insert'
        } );
    }
} );

在上述代码中，我们使用 CKEDITOR.plugins.add() 方法创建一个新的插件，然后使用 editor.addCommand() 方法添加一个新的命令，该命令会在点击按钮时执行。最后，我们使用 editor.ui.addButton() 方法将按钮添加到工具栏中。

结论

以上是 CKEditor 工具栏配置的介绍，我们可以通过配置文件或代码来创建预定义和自定义的工具栏样式。我们还可以添加可配置的工具栏按钮来改变 CKEditor 的外观和行为。