CKEditor4 自定义组件 的 代码

CKEditor4 允许自定义组件，以下是一个示例代码：

CKEDITOR.plugins.add( 'myplugin', {
    requires: 'widget',
    init: function( editor ) {
        // 定义自定义部件
        editor.widgets.add( 'mywidget', {
            // 部件模板
            template:
                '<div class="mywidget">' +
                    '<div class="mywidget-title"></div>' +
                    '<div class="mywidget-content"></div>' +
                '</div>',

            // 部件编辑 UI
            editables: {
                title: {
                    selector: '.mywidget-title'
                },
                content: {
                    selector: '.mywidget-content'
                }
            },

            // 部件数据处理
            upcast: function( element ) {
                return element.name == 'div' && element.hasClass( 'mywidget' );
            },
            downcast: function( element ) {
                element.name = 'div';
                element.addClass( 'mywidget' );
            },

            // 部件命令
            dialog: 'mywidget',

            // 部件图标
            icon: 'mywidget',

            // 部件样式
            allowedContent: 'div(!mywidget)',

            // 部件初始化函数
            init: function() {
                this.setData( 'title', this.element.findOne( '.mywidget-title' ).getText() );
                this.setData( 'content', this.element.findOne( '.mywidget-content' ).getHtml() );
            },

            // 部件数据更新函数
            data: function() {
                this.element.findOne( '.mywidget-title' ).setText( this.data.title );
                this.element.findOne( '.mywidget-content' ).setHtml( this.data.content );
            }
        });

        // 定义部件命令
        CKEDITOR.dialog.add( 'mywidget', function( editor ) {
            return {
                title: 'My Widget Properties',
                contents: [
                    {
                        id: 'mywidget',
                        label: 'My Widget Settings',
                        elements: [
                            {
                                type: 'text',
                                id: 'title',
                                label: 'Title',
                                setup: function( widget ) {
                                    this.setValue( widget.data.title );
                                },
                                commit: function( widget ) {
                                    widget.setData( 'title', this.getValue() );
                                }
                            },
                            {
                                type: 'textarea',
                                id: 'content',
                                label: 'Content',
                                setup: function( widget ) {
                                    this.setValue( widget.data.content );
                                },
                                commit: function( widget ) {
                                    widget.setData( 'content', this.getValue() );
                                }
                            }
                        ]
                    }
                ]
            };
        });
    }
});

该代码定义了一个名为 `mywidget` 的自定义部件，包含一个标题和内容。使用该部件时，编辑器会在工具栏中显示一个名为 `mywidget` 的图标，点击该图标会弹出一个名为 `My Widget Properties` 的对话框，可以在该对话框中设置部件的标题和内容，也可以直接在编辑器中拖拽该部件，然后在编辑器中直接编辑该部件的标题和内容。

该代码需要在 CKEditor 中注册 `myplugin` 插件，可以在配置文件中添加以下代码：

config.extraPlugins = 'myplugin';