昨天寫在網頁中播放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的視訊，視訊上傳沒做，可以仿照圖片上傳的功能來實現。