前端實現ckeditor插入圖片，沒必要通過上傳到服務器再插入到富文本

關於怎麼安裝和引入的很少說了，這篇筆記主要記的是關於自定按鈕
其實部分代碼就是ckeditor上的代碼，可是官方定義的插入圖片須要上傳到服務器，可是目前的需求不須要上傳上去。
我就想直接把圖片轉成base64插入到富文本。
在ckeidtor的目錄下有個plugins文件夾，咱們要作的就在這個文件夾裏
在plugins下新建一個文件夾，名稱爲abbr，進入abbr文件夾再新建一個dialog文件夾用來放自定義的窗口。
abbr文件夾下新建一個plugin.js文件，dialog文件夾新建一個mydialog.js文件。

plugin.js文件代碼

CKEDITOR.plugins.add( 'abbr', {
    icons: 'abbr',
    init: function( editor ) {
        // Plugin logic goes here...
        // 給自定義插件註冊一個調用命令
        editor.addCommand( 'abbr', new CKEDITOR.dialogCommand( 'abbrDialog' ) );

        editor.ui.addButton( 'Abbr', {
            // label爲鼠標懸停時展現的字
            label: 'Insert Abbreviation',
            // the command to be executed once the button is activated. This is the command we created in the previous step.
            command: 'abbr',
            // 將插件放在哪一組tollbar， 像我這樣寫的話，將放在'insert'組的第一個，懂了嗎？後面的數字是這個數據的下標
            toolbar: 'insert,0'
        });
        // 加載自定義窗口，'abbrDialog'跟上面調用命令的'abbrDialog'一致;
        CKEDITOR.dialog.add( 'abbrDialog', this.path + 'dialogs/mydialog.js' );
    }
});

mydialog.js

下面是官方文檔的代碼

// 全部的自定義窗口加載都是CKEDITOR.dialog.add()來調用；
CKEDITOR.dialog.add( 'abbrDialog', function( editor ) {
    return {
        // 自定義窗口的標題
        title: 'Abbreviation Properties',
        // 最小寬度
        minWidth: 400,
        // 最大高度
        minHeight: 200,
        // 自定義窗口的內容，contents爲數組，頁面上渲染爲tab頁
        contents: [
            // 第一個tab頁
            {
                id: 'tab-basic',
                // tab頁的標題
                label: 'Basic Settings',
                elements: [
                    // UI elements of the first tab    will be defined here.
                    { 
                        // 這裏是一個input框，type爲'text'類型
                        type: 'text',
                        id: 'abbr1',
                        // input的標題
                        label: 'Abbreviation',
                        // 驗證
                        validate: CKEDITOR.dialog.validate.notEmpty( "Abbreviation field cannot be empty." )
                    },
                    {   // 同上
                        type: 'text',
                        id: 'title',
                        label: 'Explanation',
                        validate: CKEDITOR.dialog.validate.notEmpty( "Explanation field cannot be empty." )
                    }
                ]
            },
            // 第二個tab頁,大體上的配置跟上面的同樣
            {
                id: 'tab-adv',
                label: 'Advanced Settings',
                elements: [
                    // UI elements of the second tab will be defined here.
                    {
                        type: 'text',
                        id: 'id',
                        label: 'Id'
                    }
                ]
            }
        ]
    };
});

效果圖：

以上就是官方的代碼和效果圖，本覺得這樣配置稍微寫些代碼也能達到個人目的，但是我實在是太天真了……

下面是修改過的代碼

CKEDITOR.dialog.add( 'abbrDialog', function( editor ) {
    return {
        title: 'Abbreviation Properties',
        minWidth: 400,
        minHeight: 200,
        contents: [
            {
                id: 'Upload',
                label: 'Upload test',
                elements: [
                    // 我這裏須要一個tab頁面，因此elements數組只有一個對象
                    {
                        // type爲html表示html代碼
                        type: 'html',
                        // 接下來html屬性就能夠直接寫html代碼了
                        html: '<div>'
                              +  '<label for="fileuploadtest">選擇圖片</label>'
                              +  '<input type="file" name="fileuploadtest" id="fileuploadtest">'
                            + '</div>',
                            // 那要怎麼拿到自定義窗口的元素呢？在ckeditor自帶的自定義窗口裏並不容易拿到，這時候咱們得用到onLoad函數了
                        onLoad: function () {
                            // 在自定義窗口展現的時候會觸發這條函數;而咱們就能在這條函數裏寫咱們的代碼了;
                            var ele = document.getElementById('fileuploadtest');
                            // 給id爲'fileuploadtest'的input綁定change事件
                            ele.addEventListener('change', function() {
                                // 當用戶沒選或者點取消的時候直接return
                                if (this.files.length == 0) return;
                                var imageData = this.files[0];
                                // 檢測後綴名
                                var lastIndex = imageData.name.lastIndexOf('.');
                                var imageSuffix = imageData.name.substring(lastIndex + 1);
                                // 判斷後綴名
                                if (!(imageSuffix == 'png' || imageSuffix == 'jpg' || imageSuffix == 'jpeg')) {
                                    alert('圖片格式只支持"png, jpg, jpeg格式"');
                                    return
                                }
                                // 大小不能超過1m 
                                if (imageData.size > 1*1024*1024) {
                                    alert('圖片大小不能超過1M');
                                    return
                                }
                                // 使用FileReader接口讀取圖片
                                var reader = new FileReader();
                                reader.addEventListener('load', function () { 
                                    var imageBase64 = reader.resul;
                                    // 我沒有想到好的辦法將數據傳遞到onOk函數那裏去，只好將圖片數據保存在sessionstorage裏面
                                    // 有好的辦法但願各位大神能提供下
                                    sessionStorage.setItem('image', imageBase64)
                                })
                                // 將圖片轉成base64格式
                                reader.readAsDataURL(imageData)
                                debugger;
                            })
                        }
                    }
                ]
            }
        ],
        onOk: function() {
            // this這裏就是自定窗口了，ckeditor內部封裝好了。
            var dialog = this;
            // 建立img標籤
            var image = editor.document.createElement( 'img' );
            // 給img標籤設置class類
            image.setAttribute( 'class', 'insert-image');
            var imageData = sessionStorage.getItem('image');
            // 將圖片數據賦予img標籤
            image.setAttribute('src',imageData);
            // 利用ckeditor提供的接口將標籤插入到富文本框中
            editor.insertElement( image );
        },
    };
});

這樣就能夠實現我想要的效果了
放上自定義窗口的圖片