背景：之前公司的项目中用的是KindEditor富文本编辑器，后来发现有上传漏洞，所以项目中用了CKeditor富文本编辑器。But 发现自带的上传图片按钮并不能将上传的图片保存到服务器上，So 下面就来说一说如何在CKeditor中自定义上传图片按钮。
- CKeditor官网下载：https://ckeditor.com/ckeditor-4/download/
- 步骤：
1).下载后解压，将整个文件夹放在项目中，如下图：
2).打开config.js配置文件，修改原有的工具栏配置，将自带的上传图片按钮EasyImageUpload修改为自定义的按钮SimpleUpload（注意：大小写），然后注册自定义按钮，如下图：
3).在plugins文件下新建一个simpleupload文件夹，如下图：
4).在simpleupload文件夹下添加相关配置，如下图
5).plugin.js代码如下：
(function () {
b = 'simpleupload'; //在config.js配置文件中写的注册自定义按钮名称
CKEDITOR.plugins.add(b, {
requires: ["dialog"],
init: function (a) {
a.addCommand(b, new CKEDITOR.dialogCommand(b));
a.ui.addButton("SimpleUpload", { //注意这里SimpleUpload是大写的，是在config.js中配置按钮名称
label: "上传图片", //鼠标放在按钮上时显示提示
command: b,
icon: this.path + "images/upload.png" //自定义上传按钮图片，放在在simpleupload文件夹下的images文件夹中
});
CKEDITOR.dialog.add(b, this.path + "dialogs/simpleupload.js") //添加上传图片配置脚本，放在simpleupload文件夹下dialogs文件夹中
}
})
})();
6).simpleupload.js代码如下：
(function () {
CKEDITOR.dialog.add("simpleupload",
function (a) {
console.log(a);
return {
title: "上传图片",
minWidth: 300, //弹出框的最小宽度
minHeight: 80, //弹出框的最小高度
contents: [{
id: "tab1",
label: "",
title: "",
expand: true,
padding: 0,
elements: [{
type: "html",
html: initImageDlgInnerHtml(a.name) //对话框中要显示的内容，a.name:表示的是当前编辑器的id，initImageDlgInnerHtml方法是调用页面上的js方法（注意：a.name是为了解决同一个页面上使用多个编辑器）
}]
}],
onOk: function () {
initUploadImage(); //点击确定按钮调用页面上的js方法
},
onLoad: function () {
//弹出框中默认的按钮为【确定】和【取消】，这里将【确定】按钮的文字为【上传】，鼠标悬停时显示也为上传
$('.cke_dialog_ui_button_ok > .cke_dialog_ui_button').text('上传');
$('.cke_dialog_ui_button_ok').attr('title', '上传');
}
}
})
})();
7).在页面上的使用
➀.引用脚本：
<script src="@Url.Content("~/CKeditor/ckeditor.js")" type="text/javascript"></script>
➁.页面上使用：
<textarea id="Content" name="Content" style="height: 200px; width: 640px; "></textarea>
<script type="text/javascript">
CKEDITOR.replace('Content', {
height: 200, //设置编辑器初始高度
//removePlugins: "simpleupload" //如果不需要上传图片按钮，加上这行代码即可
});
</script>
➂.对话框显示的方法initImageDlgInnerHtml
//在弹出框中加入html（参数id：是simpleupload.js脚本传递过来的，用于上传图片成功后返回的图片插入到当前编辑器的id中，这里只有多个编辑器时才需用到）
var ckeditorId; //定义当前上传的图片的编辑器ID为全局变量
function initImageDlgInnerHtml(id) {
ckeditorId = id;
var content = '<a style="cursor:pointer;display:inline-block;padding: 4px;border: 1px solid #bcbcbc;background: #f8f8f8;" οnclick="triggerFileEvent()">选择图片</a> <span id="imgName"></span>';
return content;
}
➃.上传成功后将将图片插入到编辑器中，如下图：
以上就是在CKeditor自定义上传图片按钮