iceEditor编辑器自定义tools使用第三方图床上传图片实例

前段时间各种找编辑器，最后选择了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了，所以上传的代码之类就不需要再次引入了。