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

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

一、wangEditor的基本显示demo

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

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

       下载地址：https://github.com/wangfupeng1988/wangEditor/releases 

编辑器效果如下：

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

后台用到的是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>

<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
<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、效果展示

 

三、踩坑经历

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

3.1、上传图片的参数问题

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

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

editor.customConfig.uploadFileName = 'file'

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

3.2、图片上传的接口配置

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

配置地址用的是

editor.config.uploadImgUrl = '/upload';

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

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

成功创建编辑器。

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

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

例如：

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

customInsert: function (insertImg, result, editor) {
      
        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
        var url = result.url
        insertImg(url)

        }

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

 

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

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

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

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