今夕是何年，回首过往，已许久没有写文章了，主要是过去太忙，没有太多闲暇时光，主要还是自己太懒了吧😂。废话不多说，今天主要是记录使用vue3集成百度编辑器解决上传图片的问题，我一直以为百度编辑器没有更新了，很久没有关注了，直到最近在gitee上面刷到了UEditor-Plus项目，才知道有新的维护了，体验了一下感觉还是蛮不知错的。在实际项目中也用过很多编辑器，有的时候一些功能就很难满足需求，之前用过wangEditor使用很方便，集成也非常简单，但是表格功能没有合并单元格功能，最近作者也说停止维护更新了，找一款好用的编辑器尤为重要，百度编辑器功能这块还是蛮丰富的，所以今天就简单记录一下我集成的过程和所采的坑。
第一步：1.先解决前端集成问题，现在vue比较主流，相关的组件已经封装好了，官网直达就知道怎么用了vue-ueditor-wrap，通过以下命令之间安装就ok了。
# vue-ueditor-wrap v3 仅支持 Vue 3
npm i vue-ueditor-wrap@3.x -S
# or
yarn add vue-ueditor-wrap@3.x
2.在main.js中配置
import {VueUeditorWrap} from "vue-ueditor-wrap";
app.use(VueUeditorWrap)
- 在具体的页面中使用
<template>
<vue-ueditor-wrap v-model="content"
editor-id="editor"
:config="editorConfig"
:editorDependencies="['ueditor.config.js','ueditor.all.js']"
style="height:500px;"/>
</template>
<script>
const content = ref('')
const editorConfig=ref({
zIndex:10000, //设置层级
initialFrameWidth:'100%', //设置编辑器宽度
serverUrl: 'http://xx.xx.xx/uEditor' //统一请求服务器地址(上传接口地址)
// 配置 UEditorPlus 的静态资源根路径，可以是 CDN 的静态资源地址
UEDITOR_HOME_URL: '/UEditor/', //在vue项目public目录中导入的编辑器静态资源
UEDITOR_CORS_URL: '/UEditor/'
})
</script>
静态资源在vue-ueditor-wrap文档里面有说明，安装组件的下一步下载UEeitor资源即可。
根据需要自己下载合适的版本，下载后将目录拷贝至vue的public目录,命名一个文件夹，这个和上述UEDITOR_HOME_URL: '/UEditor/' 有关，比如我的目录叫UEditor,这样配置就可以了，这些配置好以后，编辑器就可以展示出来了,效果如下:
ok,出现这个效果说明配置OK了，但是此时，图片上传是不行的，提示上传插件配置异常
解决这个问题，需要结合后端配置,接下来我们就该处理图片上传的问题了。
第二步：处理图片及文件上传问题，百度编辑器和其他编辑器不太一样的地方是提供了后台相关的开发包demo，我们根据自己的需要进行下载参考。https://open-doc.modstart.com/ueditor-plus/backend.html#uploadimage 阅读这个文档我们得知文件上传的接口规范信息
GET {"action": "config"} //读取配置的action名称
GET {"action": "uploadimage"} //上传图片的action名称
POST "upfile": File Data //上传文件的name名称
上传返回格式:
{
"state": "SUCCESS",
"url": "upload/demo.jpg",
"title": "demo.jpg",
"original": "demo.jpg"
}
有了这些消息，就知道怎么处理接口了，在我们下载的资源包里面有个jsp/config.json文件，这个就是返回配置的具体内容，拷贝至springboot项目的resources目录
定义编辑器文件上传接口
/**
* UEditor编辑器上传处理
* @param action
* @param upfile
* @return
*/
@RequestMapping("/uEditor")
public Object uEditor(@RequestParam("action") String action,@RequestParam(value = "upfile",required = false) MultipartFile upfile) {
//判断action:为config时，返回config.json的内容即可
switch (action){
case "config":
final InputStream resourceAsStream =
App.class.getResourceAsStream("/uEditor/config.json");
assert resourceAsStream != null;
try(BufferedReader reader = new BufferedReader(new InputStreamReader(resourceAsStream))){
String line;
final StringBuilder sb = new StringBuilder();
while ((line=reader.readLine())!=null){
sb.append(line);
}
return sb.toString();
} catch (IOException e) {
e.printStackTrace();
return null;
}
//图片上传
case "uploadimage":
if(upfile!=null){
//todo 具体保存文件逻辑(伪代码)请替换自己的逻辑
FileInfo fileInfo = uploadService.upload(upfile)
final HashMap<Object, Object> map = new HashMap<>(4);
map.put("state","SUCCESS");
map.put("title",fileInfo.getOriginalName());
map.put("original",fileInfo.getOriginalName());
map.put("url",fileInfo.getUrl());
return map;
}
}
}
Q1:这样就可以了吗？？？不行，发现还是不能上传，还是提示插件加载失败,原因是什么呢？问题在前端的编辑器资源包中ueditor.all.js，因为我的springboot是支持跨域请求的，而ueditor.all.js中有个加载配置请求，跨域的话是使用jsonp来请求的，而我们的接口又不支持jsonp请求，所以这个接口访问config配置的时候加载失败，找到ueditor.all.js,改一下逻辑,将jsonp请问标识改成fasle，让ajax发起非jsonp请求即可
ok，再刷新页面看看，图片上传插件就加载成功了,至此上传图片的配置就完成了，当然了其他的视频、附件等也是同理只是不同的action标识而已，如果方便的话都改成统一的action名称就可以了，单独处理就判断action名称就可以了。
Q2:加了接口了，改了serverUrl,还是显示加载插件失败，需要在组件里面要加这个配置 :editorDependencies="['ueditor.config.js','ueditor.all.js']" 这个配置必须加上，否则不会执行ajax获取配置的请求,确保访问action=config的时候返回config.json的内容即可。
Q3:上传的图片设置img标签图片宽度自适应,网上很多人说在静态资源包themes下的iframe.css里面加样式
img{width:100%}
的确，加了之后上传图片是会自动适应编辑器了，但是图片本身是没有样式的，放到前端展示还是会有问题，除非自己单独设置img的样式，不然还是会不适配。那怎么自动给img标签加上style样式呢，还是在ueditor.all.js里面修改
修改1:
修改2 :
loader.setAttribute('style','max-width:100%');
这样就可以了，上传图片成功后,img标签会自动加style属性，这样富文本中的图片在前端展示的时候就会自适应了，不需要额为加css控制了。
总结: 本篇文章主要通过以上两步，介绍了UEditor-plus的集成以及相关问题的处理，这就是我这使用UEditor-plus编辑器过程会遇到的问题以及处理方法，当然这不是唯一的，得具体问题具体分析。希望能够帮助到有需要的朋友，有问题欢迎留言交流，喜欢我的文章记得关注我哦😊！
