Vue cli项目，使用富文本编辑器WangEditor，8小时摸爬滚打后，弃坑Tinymce、UEditor、Quill

一共尝试了 Tinymce、UEditor、Quill等好几种编辑器，最终觉得最满意的是 WangEditor。

 

1、Tinymce

开源项目ElementAdmin自带的例子，图片上传 竟然存的是 base64。

没有看出，怎么指定后端url。

另外，这个开源项目的缺陷，很多组件都是作者自己封装第三方开源组件，这样经过二次包装的，自己再使用，感觉不灵活。

而且必须读懂 别人怎么封装的，但是 这个作者封装的代码也挺多的。

 

我看网上，别人封装第三方组件，就几句话，配置也比较清晰。

所以最后弃坑了。

 

2、UEditor

这个是尝试时间最久的。

很久以前，后端项目，用传统jquery，引入UEditor有很大的难题，给编辑器返回config.json。

这次，学习了在vue中引入UEditor，网上还有 NEditor 以及 vue中引入UEditor 3套版本以上。

 

摸索了好久之后，最终解决后端返回 config.json 大难题。

需要使用官方jar包里 的ActionEnter，关键点是 有回调。

不能直接给前台返回config.json文件

@RequestMapping("/serverUrl")     // @ResponseBody     public Object test(HttpServletRequest request, HttpServletResponse response,             @RequestParam(value = "action") String action,             @RequestParam(value = "upfile", required = false) MultipartFile file) throws Exception {         switch (action) {         case "config": // 加载返回ueditor配置文件conf/config.json             // return getConfig();             return config(request, response);         case "uploadImage": // 上传图片             return uploadImage(request, file);         case "uploadVideo": // 上传视频             return "视频处理方法";         case "uploadFile": // 上传文件             return "文件处理方法";         default:             return "无效action";         }     }

public String config(HttpServletRequest request, HttpServletResponse response) throws IOException {         String rootPath = request.getSession().getServletContext().getRealPath("/");         // TODO 封装 PathKit.getClassPath()         // String configPath = PathKit.getClassPath()+ "config.json";         String configPath = resourceLoader.getResource("config.json").getFile().getAbsolutePath();         // PrintWriter out = response.getWriter();         String exec = new ActionEnter(request, rootPath, configPath).exec();         // out.write(exec);         return exec;     }

 

3、Quill

简单用了下，不符合自己的需要。

 

4、WangEditor

最终搞定了，看起来也不错，网友封装的也简单好用。感谢。

参考：https://www.cnblogs.com/huge1122/p/11346115.html

关于在vue项目中使用wangEditor

 

以下代码经过自己验证

安装：npm install wangeditor --save

 

模版：

 

 

具体页面使用

  import EditorBar from'@/components/WEditor/index'

  components: {EditorBar },

 

模版里处理，后端返回的json：

{"fileName":"https://jtn-piaoju-test.oss-cn-beijing.aliyuncs.com/2019/09/jtn15175821466971.jpg","success":true}

customInsert: (insertImg, result, editor) => {             // 图片上传成功，插入图片的回调             //result为上传图片成功的时候返回的数据，这里我打印了一下发现后台返回的是data：[{url:"路径的形式"},...]             // console.log(result.data[0].url)             //insertImg()为插入图片的函数              //循环插入图片              console.log("图片上传返回："+result)             // for (let i = 0; i < 1; i++) {               //               let url = result.fileName               insertImg(url)             // }           }

 

从前到后，解决富文本，主要是图片上传问题，花费了8小时左右。

中秋节，有1天都在解决这个问题，最晚的时候，弄到晚上11点。

最后还是 弃坑了，UEditor有 use strict严格模式下的报错问题。

不严格校验后， 虽然不报错了，但是 图片上传成功了，但是“临门一脚”  图片回显还是有问题。

 

 

最后，感谢网友。

经过这么长时间的实践，终于找到了满意的解决方案。

 

相关错误记录：

vue-cli创建的项目中引入第三方库报错 'caller', 'calle', and 'arguments' properties may not be...

有兴趣可以参考：https://blog.csdn.net/Sophie_U/article/details/76223978

Neditor是基于Ueditor的一款现代化界面的富文本编辑器。 

https://demo.neditor.notadd.com/

 

https://github.com/caiya/vue-neditor-wrap

 

https://www.jb51.net/article/135817.htm

Vue2.0中集成UEditor富文本编辑器的方法