前端实现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 );
        },
    };
});

这样就能够实现我想要的效果了
放上自定义窗口的图片