CKEDITOR自定义按钮上传图片

zh前端时间需要用到富文本编辑器，经理推荐了这个ckeditor，开发过程中有上传图片的功能，由于业务需要，我们不存图片路径，只好把图片转成base64当成标签存到数据库，编辑器自带的上传图片功能都是存储路径的（也有可能是学艺不精）我们需要转成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( '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.result;
                                    // 我没有想到好的办法将数据传递到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 );
        },
    };
});

这样就没有问题了。点击自定义的按钮