前段时间各种找编辑器，最后选择了iceEditor编辑器，但使用了一段时间之后还是换了，现在使用的是Ueditorplus版本，同样也自定义了第三方图床api。
使用第三方图片的好处就是我所有的图片都集中在一起，至于存在ftp还会各大厂家的存储桶，都是非常方便定义的，在图床后台切换一下就好了。
后台的截图：
完整的代码：
<script type="text/JavaScript" src="/static/iceEditor/iceEditor.js"></script>
<script>
//自定义编辑器菜单
ice.editor("content",function(e){
e.menu = [
'code', //源码
// 'backColor', //字体背景颜色
'fontSize', //字体大小
'foreColor', //字体颜色
'bold', //粗体
// 'italic', //斜体
// 'underline', //下划线
'strikeThrough', //删除线
'justifyLeft', //左对齐
'justifyCenter', //居中对齐
'justifyRight', //右对齐
'indent', //增加缩进
'outdent', //减少缩进
'insertOrderedList', //有序列表
'insertUnorderedList', //无序列表
// 'superscript', //上标
// 'subscript', //下标
'createLink', //创建连接
'unlink', //取消连接
'hr', //水平线
'table', //表格
// 'files', //附件
// 'music', //音乐
// 'video', //视频
'insertImage', //图片
'removeFormat', //格式化样式
'paste', //富文本粘贴
'line' //菜单分割线
];
this.uploadUrl = "/static/plugs/wangeditor/bendi-upload.php";
// this.uploadUrl = "/static/plugs/wangeditor/ftp-upload.php";
this.pasteText = true;
this.screenshot = true;
this.screenshotUpload = true;
//下拉菜单类型
this.plugin({
menu:'黑色代码',
name:'codeLanguages',
click:function(e,z){
var v = '<pre>请填写代码块</pre>';
z.addValue(v);
}
});
this.plugin({
menu:'下载按钮',
name:'dropdown',
click:function(e,z){
var v = '<a href="地址" class="theme-demo" target="_blank" rel="external nofollow"> 蓝奏云下载</a>';
z.addValue(v);
}
});
this.plugin({
menu: 'api图床',
name: 'aaathreeUpload',
style:'#up_to_chevereto {display: none!important;}#up_img_label {color:#fff!important;background-color: #16a085!important;border-radius: 5px!important;padding: 7px!important;height: 35px;width: 70px;}',
popup: {
width: 180,
height: 70,
title: '第三方图床',
content: '<input id="up_to_chevereto" class="ssss" type="file" accept="image/*" multiple="multiple"/><label for="up_to_chevereto" id="up_img_label"><i class="fa fa-picture-o" aria-hidden="true"></i> 上传到图床</label>',
},
success:function(e,z){
$(".ssss").change(function() {
for(var i = 0; i < this.files.length; i++) {
var f = this.files[i];
var formData = new FormData();
formData.append('file', f);
formData.append('token', 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
var res;
$.ajax({
async: true,
crossDomain: true,
url: 'https://你图片的api地址',
type: 'POST',
processData: false,
contentType: false,
data: formData,
beforeSend: function(xhr) {
$('#up_img_label')
.html('<i class="fa fa-spinner rotating" aria-hidden="true"></i> Uploading...');
},
success: function(res) {
$("#up_img_label")
.html('<i class="fa fa-check" aria-hidden="true"></i> 上传成功，继续上传');
var foxxx = document.getElementById("zopo").value;
z.addValue('<p><a href="'+res.data.url+'"><img class="aligncenter" src="'+res.data.url+'" alt="'+foxxx+'"></a></p>');
e.close();
},
error: function() {
$("#up_img_label")
.html('<i class="fa fa-times" aria-hidden="true"></i> 上传失败，重新上传');
}
});
}
});
}
});
this.create();
})
</script> 注意：如果按照我的这个写法写完之后发现没效果，自己添加一个jquery导入进来，我当前的代码中已经全局引入jquery了，所以上传的代码之类就不需要再次引入了。