ueditor图片上传 flash插件初始化失败

【前言】

这两天维护的一个老项目，运营抱怨后台管理发布资讯 一直报浏览器flash不支持。作为后端开发只能硬着头皮来卖弄一下抠脚的前端技术。
看了一下代码 富文本编辑器用的是 ueditor ,ueditor的图片和音视频上传都用的是flash上传，燃鹅现在很多浏览器新版本已经不支持flash了，所以图片上传出现了无法使用flash的问题。本想着让运营换个浏览器，但是又不好意思说。算了网上找个方法改一下吧。先尝试使用了TinyMCE,但是弹框中使用TinyMCE，总会出现这样那样的问题，例如格式选择框可能出现在页面的任何地方，包括弹框遮罩层内，想想这要用TinyMCE，估计运营的抱怨只会更多。算了还是用ueditor吧，搜了一下有vue版本的解决方案，但是我们的是古董级的jquery，阅读了一下借鉴了一下方法 “自定义按钮 + 文件选择框”。下面我们以上传图片为例

【自定义按钮】

1、ueditor.all.js 修改 btnCmds 添加自定义的按钮名字，注意 我一开始写的是 uploadImg 但是 用的时候却用不起来，也没深究原因，这里还是建议和其他的一样都用小写

2、zh-cn.js 修改 ‘labelMap’ 添加按钮的中文注释

3、 ueditor.config.js 修改 toolbars添加 上传图片的按钮

4、ueditor.css 添加按钮样式

5、至此效果如下，至于绑定事件 我们需要与输入框结合使用。

【文件选择框】

1、添加一个文件输入框 通过js 来控制点击上传图片按钮触发文件输入框的点击事件从而选择文件，该输入框设置为隐藏 display：none 设置只能选择图片文件 accept=“image/*”

2、添加js代码 在execCommand中触发文件选择，选中文件之后，上传成功 生成 标签插入内容区

<script>
 var ue = UE.getEditor('container');
 UE.commands['uploadimg'] = {
   execCommand:function(){
     // 触发 文件选择
     $("#ueUploadImg").click();
   }     
 }
 function changeImg(){
   var file = $("#ueUploadImg")[0].files[0];
   $("#ueUploadImg").val('');
   if(file){
     // 防止有人手输文件名
     if(!file.type.startsWith("image/")){
       $.messager.alert('提示',"请选择图片文件",'question');
       return;
     }
     var data = new FormData();
     data.append('upfile',file);
     //上传图片
     $.ajax({
       type:'POST',
       url:'your-upload—url',
       contentType:false,
       processData:false,
       data:data,
       mimeType:"multipart/form-data",
       success:function(res){
         var result = JSON.parse(res);
         if(result.success){
           //图片上传成功，生成<img> 标签插入内容区
           ue.execCommand('inserthtml', '<img src="'+result.url+'" _src="'+result.url+'">');
         }
       },
     }) 
   }
 }
 
 </script>

【顺便提一嘴】

ueditor图片选取错位问题可以修改 ueditor.all.js中attachTo的style 设置top值如下
‘top’: iframePos.y + imgPos.y - me.editor.document.documentElement.scrollTop - editorPos.y - parseInt(resizer.style.borderTopWidth) + ‘px’