網頁線上文字編輯器CKEditor

一、CKEditor是什麼？

   CKEditor是新一代的FCKeditor，是一個重新開發的版本。CKEditor是全球最優秀的網頁線上文字編輯器之一，因其驚人的性能與可擴充性而廣泛的被運用于各大網站。

二、CKEditor效果

   如圖所見，編輯器上的元件非常豐富，可以根據自己的需求增減，并且可以自定義元件。

三、CKEditor的基本使用

1、先來看個最簡單的例子，

引入js

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

html代碼

<div id="editorSpace"></div>      

js代碼

CKEDITOR.appendTo( 'editorSpace' );      

基本效果圖，這樣生成的是個固定的編輯框，固定的大小，采用預設的插件排布。

2、再來看一個直接編輯可編輯區域的代碼樣例

html代碼如下，注意

contenteditable

=

"true"

<div id="header">
    <div id="headerLeft">
        <h2 id="sampleTitle" contenteditable="true">
            CKEditor<br> Goes Inline!
        </h2>
        <h3 contenteditable="true">
            Lorem ipsum dolor sit amet dolor duis blandit vestibulum faucibus a, tortor.
        </h3>
    </div>
    <div id="headerRight">
        <div contenteditable="true">
            <p>
                Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
            </p>
                                                                                                                                                      
        </div>
    </div>
</div>      

然後js調用編輯菜單

CKEDITOR.on( 'instanceCreated', function( event ) {
            var editor = event.editor,
                    element = editor.element;
            editor.config.extraPlugins = 'HelloWorld';
            // Customize editors for headers and tag list.
            // These editors don't need features like smileys, templates, iframes etc.
            if ( element.is( 'h1', 'h2', 'h3' ) || element.getAttribute( 'id' ) == 'taglist' ) {
                // Customize the editor configurations on "configLoaded" event,
                // which is fired after the configuration file loading and
                // execution. This makes it possible to change the
                // configurations before the editor initialization takes place.
                editor.on( 'configLoaded', function() {
                    // Remove unnecessary plugins to make the editor simpler.
                    editor.config.removePlugins = 'colorbutton,find,flash,font,' +
                            'forms,iframe,p_w_picpath,newpage,removeformat,' +
                            'smiley,specialchar,stylescombo,templates';
                    // Rearrange the layout of the toolbar.
                    editor.config.toolbarGroups = [
                        { name: 'editing',      groups: [ 'basicstyles', 'links' ] },
                        { name: 'undo' },
                        { name: 'clipboard',    groups: [ 'selection', 'clipboard' ] },
                        { name: 'about' }
                    ];
                });
            }
        });      

效果如下圖，點選到該區域時彈出編輯菜單

四、CKEditor的插件開發

   在CKEditor中，可以自定義開發插件，下面我們來看一下插件的開發

   首先我們定義這個插件為HelloWorld，那麼我們需要在CKEditor的plugins檔案夾下建立插件檔案夾，起名為HelloWorld。

   然後我們來寫插件的按鈕，在HelloWorld檔案夾下建立plugin.js

CKEDITOR.plugins.add('HelloWorld', {
    init: function (editor) {
        var pluginName = 'HelloWorld';
        CKEDITOR.dialog.add(pluginName, this.path + 'dialogs/HelloWorld.js');
        editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));
        editor.ui.addButton(pluginName,
            {
                label: 'Hello',
                command: pluginName,
                icon: this.path + 'p_w_picpaths/hello.png'
            });
    }
});      

這裡面定義了插件按鈕圖示為p_w_picpaths/hello.png

點選插件按鈕彈出框定義js為dialogs/HelloWorld.js

然後我們來看彈出框的定義

(function () {
    function HelloWorldDialog(editor) {
        return {
            title: '對誰說Hello',
            minWidth: 300,
            minHeight: 80,
            buttons: [{
                type: 'button',
                id: 'someButtonID',
                label: 'Button',
                onClick: function () {
                    alert('Custom Button');
                }
            },
                CKEDITOR.dialog.okButton,
                CKEDITOR.dialog.cancelButton],
            contents:
                [
                    {
                        id: 'info',
                        label: '名字',
                        title: '名字',
                        elements:
                            [
                                {
                                    id: 'text',
                                    type: 'text',
                                    style: 'width: 50%;',
                                    label: '名字',
                                    'default': '',
                                    required: true,
                                    validate: CKEDITOR.dialog.validate.notEmpty('名字不能為空'),
                                    commit: function () {
                                        var text = 'Hello' +this.getValue();
                                        alert(text);
                                    }
                                }
                            ]
                    }
                ],
            onLoad: function () {
                alert('onLoad');
            },
            onShow: function () {
                alert('onShow');
            },
            onHide: function () {
                alert('onHide');
            },
            onOk: function () {
                this.commitContent();
            },
            onCancel: function () {
                alert('onCancel');
            },
            resizable: CKEDITOR.DIALOG_RESIZE_HEIGHT
        };
    }
    CKEDITOR.dialog.add('HelloWorld', function (editor) {
        return HelloWorldDialog(editor);
    });
})();      

五、傳送門

CKEditor官方位址