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