ckeditor添加插入flv視頻的插件

首發：我的博客，更新&糾錯&回覆

昨天寫在網頁中播放flv的博文的時候，想在博文中插入視頻，可是發現沒法實現。
由於用的編輯器是ckeditor，決定本身寫個插件插入視頻。
官方的教程在這裏，寫得很好，又簡明又清楚。

寫一個插件須要創建的文件夾和文件如圖所示：

主目錄video（此目錄名即插件名）要放到ckeditor的plugins文件夾下，其中包含最主要的文件plugin.js。
若是須要對話框，則須要dialogs文件夾和與插件同名的js文件，本例中即video.js。
圖標放在icons文件夾下，命名爲xxx.png，大小爲16*16像素。

主文件plugin.js內容以下：

CKEDITOR.plugins.add( 'video', {
    icons: 'video',
    init: function( editor ) {
        editor.addCommand( 'video', new CKEDITOR.dialogCommand( 'videoDialog' ) );

        editor.ui.addButton( 'Video', {
            label: '視頻',
            command: 'video',
            toolbar: 'insert'
        });

        CKEDITOR.dialog.add( 'videoDialog', this.path + 'dialogs/video.js' );
    }
});

其中涉及「video」的地方基於約定都要與插件名保持一致，不要挑戰這個約定，毫無必要且毫無心義。

彈出對話框文件video.js內容以下：

CKEDITOR.dialog.add( 'videoDialog', function ( editor ) {
    return {
        title: '視頻屬性',
        minWidth: 400,
        minHeight: 200,

        contents: [
            {
                id: 'flv',
                label: 'VIDEO URL',
                elements: [
                    {
                        type: 'text',
                        id: 'flvLink',
                        label: '輸入視頻路徑',
                        validate: CKEDITOR.dialog.validate.notEmpty( "視頻路徑不能爲空！" )
                    }
                ]
            }
        ],

        onOk: function() {
            var dialog = this;
            var url = dialog.getValueOf('flv', 'flvLink');

            var video = editor.document.createElement( 'video' );
            video.setAttribute('src', url);
            editor.insertElement( video );
        }
    };
});

其中contents定義對話框中的選項卡和表單項，onOk是點擊對話框的「肯定」按鈕時觸發的回調函數。
顯然onOk這個函數是重中之重。最關鍵的有兩個步驟：
1)從對話框表單中取值，即示例代碼中的var url = dialog.getValueOf('flv', 'flvLink');
2)向編輯器中插入內容，即示例代碼中的editor.insertElement( video );
這兩個步驟要根據具體須要自行實現。

插件編寫完成後在頁面js中顯式引入之便可：

    CKEDITOR.replace( 'editor', {
        language: 'zh-cn',
        extraPlugins : 'video'
    } );

示例代碼已上傳到github。
TODO:目前只能插入指定url的視頻，視頻上傳沒作，能夠仿照圖片上傳的功能來實現。

 

長期歡迎項目合做機會介紹，項目收入10%用於酬謝介紹人。新浪微博：@冷鏡，QQ：908789432。