CKEditor4配置与开发详细中文说明文档

下面是关于“CKEditor4配置与开发详细中文说明文档”的完整攻略。

1. CKEditor简介

CKEditor是一款优秀的开源的在线 WYSIWYG HTML 编辑器。

CKEditor提供了非常丰富的功能，可以快速开发Web应用中的富文本编辑器，比如博客、论坛、邮件编辑等应用场景。

2. 安装与配置

2.1 下载与安装

下载CKEditor的最新版本，解压缩到你的网站目录中。

CKEditor下载地址：https://ckeditor.com/download/

2.2 引入编辑器

将需要使用编辑器的页面引入CKEditor.js。

<script src="ckeditor/ckeditor.js"></script>

2.3 初始化编辑器

在页面上使用CKEditor，需要先初始化编辑器。

<textarea name="editor1"></textarea>
<script>
    CKEDITOR.replace('editor1');
</script>

3. 常用配置

3.1 配置工具栏

可以通过配置工具栏，控制编辑器中显示的功能按钮。

CKEDITOR.replace('editor1', {
    toolbar : [
        { name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
        { name: 'clipboard', items : [ 'Cut','Copy','Paste','-','Undo','Redo' ] },
        { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
        { name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'
                 ,'Iframe' ] },
        '/',
        { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
        { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
                 '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
        { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
        { name: 'tools', items : [ 'Maximize','-','About' ] }
    ]
});

3.2 配置语言

编辑器内置多种语言，可以通过配置设置语言。

CKEDITOR.replace('editor1', {
    language: 'fr'
});

3.3 配置皮肤

编辑器内置多种皮肤，可以通过配置设置皮肤。

CKEDITOR.replace('editor1', {
    skin: 'moono'
});

4. 插件开发

4.1 创建插件

在CKEditor的plugins目录下创建一个新的目录，例如：

ckeditor/plugins/myplugin/

在myplugin目录下创建plugin.js文件，写入下面的内容：

CKEDITOR.plugins.add( 'myplugin', {
    init: function( editor ) {
        // My plugin logic here
    }
});

4.2 注册插件

在配置编辑器的时候，需要注册插件。

CKEDITOR.plugins.addExternal('myplugin', '/ckeditor/plugins/myplugin/plugin.js');
CKEDITOR.replace('editor1', {
    extraPlugins: 'myplugin'
});

4.3 插件开发示例

下面是一个简单的插件示例，实现自定义的颜色选择器。

CKEDITOR.plugins.add('mycolor', {
    requires: 'panelbutton,basicstyles',
    icons: 'mycolor',
    init: function (editor) {
        // 创建颜色选择器菜单按钮
        editor.ui.addButton('MyColor', {
            label: 'Color',
            modes: { wysiwyg: 1 },
            icon: 'https://www.ckeditor.com/docs/images/sample-toolbar.png',
            panel: {
                // 添加颜色选择器面板
                css: [ CKEDITOR.skin.getPath('editor') ].concat(CKEDITOR.getUrl('plugins/mycolor/css/panel.css')),
                multiSelect: true,
                attributes: {
                    role: 'listbox',
                    'aria-label': 'Color picker'
                },
                init: function () {
                    var colors = [
                        '#80D580', '#FFC2C2', '#64C2F8', '#FFA070',
                        '#b4b4b4', '#f2f2f2', '#FFEA00'
                    ];
                    for (var i = 0; i < colors.length; i++) {
                        var color = colors[i];
                        this.add('color' + i, {
                            type: 'html',
                            label: '',
                            attributes: {
                                role: 'option',
                                // 设置颜色选择器单元格的背景色
                                style: 'background-color: ' + color
                            },
                            html: '<div class="cke_color_block" style="background-color: ' + color + '"></div>'
                        });
                    }
                },
                onClick: function (value) {
                    editor.execCommand('foreColor', value);
                    this.hide();
                }
            },
            onRender: function () {
                editor.on('selectionChange', function (event) {
                    var value = event.data && event.data.path && event.data.path.elements && event.data.path.elements[0] && event.data.path.elements[0].$.style.color;
                    this.setValue(value || '');
                }, this);
            },
            onClick: function () {
                editor.openDialog('mycolor', function () {});
            }
        });
        // 创建颜色选择器弹窗
        CKEDITOR.dialog.add('mycolor', function () {
            return {
                title: 'Text Color',
                minHeight: 340,
                minWidth: 160,
                contents: [
                    {
                        id: 'tab1',
                        label: 'Colors',
                        elements: [
                            {
                                type: 'html',
                                html: '<div class="cke_color_block"></div> Select a color from the panel above:',
                                style: 'height: 25px;'
                            }
                        ]
                    }
                ]
            };
        });
    }
});

将插件目录放在CKEditor的plugins目录下，即可在CKEditor中使用自定义的颜色选择器菜单按钮。

CKEDITOR.replace('editor1', {
    extraPlugins: 'mycolor'
});