添加插件

要在ckeditor中插入一个图片上传功能的按钮，首先得先在config.js中补加一句代码：

    config.extraPlugins += (config.extraPlugins ? ',uploadImg' : 'uploadImg');

然后再在plugins文件夹下面添加新文件夹，名叫uploadImg(随便起名字)：

image.png

如图添加相应的文件，其中plugins.js是配置新的uploadImg插件:

(function () {
    CKEDITOR.plugins.add('uploadImg',
        {    init: function(editor)
        {
            var pluginName = 'uploadImg';
            //导入js
            CKEDITOR.dialog.add(pluginName, this.path + 'dialogs/uploadImg.js');
            //导入css文件
            CKEDITOR.document.appendStyleSheet(CKEDITOR.getUrl(this.path+ "dialogs/uploadImg.css"));
            editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));
            editor.ui.addButton('uploadImg',
                {
                    label: '上传图片',
                    command: pluginName,
                    icon: CKEDITOR.plugins.getPath('uploadImg') + 'images/checked.png'
                });
        }
        });

})();

uploadImg.js文件里面用到了xmlHttpRequest,目的是为了获取后台传回来的imgUrl。

var imgUrl = '';

CKEDITOR.dialog.add("uploadImg", function (a) {
    a = a.lang.uploadImg;
    return {
        title: '上传图片',
        minWidth: 500,
        minHeight: 400,
        contents: [{
            id: "tab1",
            label: "上传图片",
            title: "上传图片",
            expand: !0,
            padding: 0,
            elements: [{
                type: "html",
                html: ''+
                      '
'+
                      '',
                style: "width=100%; height=400px;frameborder=0; scrolling=no ;marginheight=0 ;marginwidth=0;",
            }],

        }],
        //buttons: [CKEDITOR.dialog.okButton],
        //buttons: [CKEDITOR.dialog.cancelButton],


        onOk: function () {
            if (imgUrl !== null) {
                var imgSrc = imgUrl;
                //var imgSrc = "http://15.114.118.50:8090/image/store_1234/3c2b8dd7d2604b2582aedb0a7f97b228.blob";
                console.log("imgSrc", imgSrc);
                CKEDITOR.instances.editor_editor.insertHtml("![](" + imgSrc + ")");  //将select插入编辑器

            } else {
                alert("hf is null");
            }

        }
        //onHide: function () { document.getElementById('img_browser').contentDocument.location.reload(); },
        //resizable: CKEDITOR.DIALOG_RESIZE_HEIGHT
    }
        ;
});
var xmlhttp;
function clickButton()
{
    xmlhttp=null;
    var file = document.getElementById("file").files[0];
    var data = new FormData();
    data.append("file", file);
    if (window.XMLHttpRequest)
    {// code for all new browsers
        xmlhttp=new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {// code for IE5 and IE6
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (xmlhttp!=null)
    {
        xmlhttp.open("POST","http://15.114.118.50:8081/uploadImage",true);
        xmlhttp.setRequestHeader('Authorization', 'Client-ID 8d26ccd12712fca');
        xmlhttp.send(data);
        xmlhttp.onreadystatechange=callback;
    }
    else
    {
        alert("Your browser does not support XMLHTTP.");
    }
}

function callback() {

    //判断对象状态是否交互完成，如果为4则交互完成
    if (xmlhttp.readyState === 4) {

        if (xmlhttp.status === 200) {
            //接收数据,得到服务器输出的纯文本数据
            var response = xmlhttp.responseText;
            var obj = eval('(' + response + ')');
            alert("success");
            imgUrl = obj.uploadFile.fileUrl;
        }else
        {
            alert("Problem retrieving XML data");
        }
    }
}