WangEditor富文本编辑器图片上传踩坑之路

谁借莪１个温暖的怀抱￠ 2022-02-24 08:50 2017阅读 0赞

最近由于业务需求，需要用到富文本编辑器，找寻了好久，起初想使用百度的ueditor，但在使用的过程中实在是遇到了太多的坑，于是另外锁定了一款富文本编辑器——wangEditor。这是一款轻量级的富文本编辑器，比起百度的ueditor，这款编辑器的界面更加简单，文档也很详细。对于需求不是很高的功能来说，这款编辑器实在是不二之选。

## 一、wangEditor的基本显示demo ##

这个部分非常简单，官网文档也写得非常详细，直接参考官网即可

附上文档地址：[https://www.kancloud.cn/wangfupeng/wangeditor3/335769][https_www.kancloud.cn_wangfupeng_wangeditor3_335769]

下载地址：[https://github.com/wangfupeng1988/wangEditor/releases][https_github.com_wangfupeng1988_wangEditor_releases]

编辑器效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pjY3plcm8_size_16_color_FFFFFF_t_70][]

## 二、图片上传后台接口编写 ##

后台用到的是springboot+mybatis+mysql，为了方便测试，图片上传后是直接放在本地服务器。

### 2.1、Service层代码 ###

public interface IImgUploadService {
    
        String imgUpload(String imgPath);
    }
    
    
    
    @Service("iImgUploadService")
    public class ImgUploadServiceImpl implements IImgUploadService {
    
        @Autowired
        private ImageUploadMapper imageUploadMapper;
    
        private static Logger logger = LoggerFactory.getLogger("ImgUploadServiceImpl.class");
    
    
        /**
         * 存储上传图片的路径
         * @param
         * @return
         */
        public String imgUpload(String imgPath){
    
            ImageUpload upload = new ImageUpload();
            upload.setImgpath(imgPath);
            // 一定要加非空判断，否则会报空指针异常
            if(upload.getImgpath() == null){
                return "图片地址为空";
            }
    //        logger.error("向数据库中存储的路径为：" + upload.getImgpath());
    //        logger.error("传递过来的imgPath参数为：" + imgPath);
    //        logger.error(upload.toString());
            int rowCount = imageUploadMapper.insertImgPath(upload.getImgpath());
            logger.error(rowCount + "");
            if(rowCount > 0){
                return "图片地址存储成功";
            }
            return "图片地址存储失败";
        }
    }

### 2.2、Controller层代码 ###

public class TestController {
    
        private static final Logger logger = LoggerFactory.getLogger("TestController.class");
        private final ResourceLoader resourceLoader;
        @Autowired
        private IImgUploadService iImgUploadService;
        @Value("${web.upload-path}")
        private String path;
        @Value("${server.port}")
        private String port;
    
        @Autowired
        public TestController(ResourceLoader resourceLoader) {
            this.resourceLoader = resourceLoader;
        }
    
        /**
         * @param file 要上传的文件
         * @return
         */
        @ResponseBody
        @RequestMapping(value = "/fileUpload", method = RequestMethod.POST)
        public Map<String, String> upload(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
    
            Map<String,String>  map=new HashMap<>();
    
            String filePath = request.getSession().getServletContext().getRealPath(path);
    
            //生成随机字符串，用于图片命名
            String uuid = UUID.randomUUID().toString().replaceAll("-", "");
    
            // 获得文件类型
            String fileType = file.getContentType();
            // 获得文件后缀名称
            String imageName = fileType.substring(fileType.indexOf("/") + 1);
            // 原名称
    //        String fileName = file.getOriginalFilename();
            // 新名称
            String newFileName = uuid + "." + imageName;
    
            System.out.println(imageName);
    
            try {
                FileUtils.upload(file.getBytes(), filePath, newFileName);
            } catch (Exception e) {
                e.printStackTrace();
            }
    
            // 拼接图片url
            String imgHost = "http://127.0.0.1:" + port;
            String imgUploadPath = path;
            String imgName = newFileName;
            String imgPath = imgHost + imgUploadPath + imgName;
            iImgUploadService.imgUpload(imgPath);
            map.put("url",imgPath);
            return map;
    
        }
    
        /**
         * 跳转到文件上传页面
         *
         * @return
         */
        @RequestMapping("test")
        public String toUpload() {
            return "ttt";
        }

### 2.3、前端HTML代码 ###

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8"/>
        <title>ueditor-demo</title>
        <script th:src="@{${#httpServletRequest.getContextPath()}+'/js/jquery-1.7.1.min.js'}"></script>
        <script th:src="@{${#httpServletRequest.getContextPath()}+'/js/wangEditor.min.js'}"></script>
    
    </head>
    <body>
    <h2>wangEditor</h2>
    
    <div id="editor">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
    </div>
    
    
    <script type="text/javascript" src="/wangEditor.min.js"></script>
    <script type="text/javascript">
        var E = window.wangEditor;
        var editor = new E('#editor');
    
        //开启debug模式
        editor.customConfig.debug = true;
        // 关闭粘贴内容中的样式
        editor.customConfig.pasteFilterStyle = false
        // 忽略粘贴内容中的图片
        editor.customConfig.pasteIgnoreImg = true
        // 使用 base64 保存图片
        //editor.customConfig.uploadImgShowBase64 = true
    
    
        editor.customConfig.uploadFileName = "file";
        editor.customConfig.uploadImgServer = '/fileUpload';
        editor.customConfig.debug = true;
    
        //自定义上传图片事件
        editor.customConfig.uploadImgHooks = {
            before: function (xhr, editor, files) {
    
            },
            success: function (xhr, editor, result) {
                console.log("上传成功");
            },
            fail: function (xhr, editor, result) {
                console.log("上传失败,原因是" + result);
            },
            error: function (xhr, editor) {
                console.log("上传出错");
            },
            timeout: function (xhr, editor) {
                console.log("上传超时");
            },
            customInsert: function (insertImg, result, editor) {
                // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
    
                // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                var url = result.url;
                insertImg(url)
    
                // result 必须是一个 JSON 格式字符串！！！否则报错
            }
    
        };
        // 或者 var editor = new E( document.getElementById('editor') )
        editor.create()
    </script>
    
    </body>
    
    </html>

### 2.4、效果展示 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pjY3plcm8_size_16_color_FFFFFF_t_70 1][]

# 三、踩坑经历 #

做的是一个小demo所以代码很简单。下面是我要说的重点，我的踩坑经历。

### **3.1、上传图片的参数问题** ###

**如果后台自定义的上传文件的参数，如图**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pjY3plcm8_size_16_color_FFFFFF_t_70 2][]

那么前端js中就得添一句：

editor.customConfig.uploadFileName = 'file'

用于指定参数名，否则前端会出现“400”的错误。

### 3.2、图片上传的接口配置 ###

在这里我被官网的文档给坑了一把，也许是我自己没理解清楚吧，唉！文档中如下图所说配置

![20190403172158275.png][]

配置地址用的是

editor.config.uploadImgUrl = '/upload';

然而我用这个确怎么也无法成功，编辑器都无法创建，后来更改为

// 配置服务器端地址
        editor.customConfig.uploadImgServer = '/upload'

成功创建编辑器。

### 3.3、后台数据返回与编辑器内部图片显示 ###

如果我们通过上面配置的接口成功将图片上传至服务器了，现需要在编辑器里将刚上传的图片显示在编辑器里面。那么后台需要返回图片的url，格式如http://localhost:8011/uploadfiles/5168898981064558.jpeg，在浏览器中输入该url，然后回车，要能得到刚才上传的图片

例如：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pjY3plcm8_size_16_color_FFFFFF_t_70 3][]

接着要想让此图片在编辑器里面显示，还需要在前端自定义插入图片的事件，因为**编辑器是不会自动插入图片**的，贴出该事件的代码：

customInsert: function (insertImg, result, editor) {
          
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
    
            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
            var url = result.url
            insertImg(url)
    
            }

注意：**result 必须是一个 JSON 格式字符串！！！否则报错**

最后贴出demo的完整代码地址：[https://gitee.com/1697923044/springboot-wangEditor][https_gitee.com_1697923044_springboot-wangEditor]

1、项目默认将图片上传到本地路径，如果需要上传到服务器路径直接在项目中进行修改即可，不要忘了修改存储到数据库中的路径。

2、项目没有使用任何图片上传控件或插件，原生springBoot实现，简单易上手。

3、项目使用Maven进行构建，朋友们在导入项目时不要导错了。

[https_www.kancloud.cn_wangfupeng_wangeditor3_335769]: https://www.kancloud.cn/wangfupeng/wangeditor3/335769
[https_github.com_wangfupeng1988_wangEditor_releases]: https://github.com/wangfupeng1988/wangEditor/releases
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pjY3plcm8_size_16_color_FFFFFF_t_70]: /images/20220224/aced9087b32243be9135b8240968d03c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pjY3plcm8_size_16_color_FFFFFF_t_70 1]: /images/20220224/048275df958a46958055616dd465bdbf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pjY3plcm8_size_16_color_FFFFFF_t_70 2]: /images/20220224/d24f1ccb4919456ebbd06874fe1b77a3.png
[20190403172158275.png]: /images/20220224/018972f12fa74c839008f60ed4364100.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pjY3plcm8_size_16_color_FFFFFF_t_70 3]: /images/20220224/0d15525c18054cdc916d948b57708955.png
[https_gitee.com_1697923044_springboot-wangEditor]: https://gitee.com/1697923044/springboot-wangEditor