集成wangEditor富文本编辑器

以下是JavaWeb项目集成wangEditor富文本编辑器，wangEditor是一个轻量级的富文本编辑器，优点是：集成速度快，容易上手。缺点是：相对于百度Ue功能较少，不过也基本满足了我们所需的功能。

亲测有效的教程！！！

官网 ：wangEditor官网

下载： wangEditor项目

首先下载wangEditor项目，下面是项目的结构。

wangEditor项目结构.png

将release复制到项目中，以下是我的项目

自己的项目结构.png

下面是前端展示页面的代码。代码中，图片的文件服务器地址要换成自己定义的地址。

    
    



    

        
欢迎使用 wangEditor 富文本编辑器
    
    

下面是后台的代码

    @ResponseBody
    @RequestMapping(value = "/editor/img",method = RequestMethod.POST)
    public Map EditorImgUpload(@RequestParam("myfile") List list) {
        //获取视频文件存储路径 如:videos/video
        String imgStoragePath = uploadSettings.getImgStoragePath();
        LinkedList imgUrlList = new LinkedList<>();
        for (MultipartFile file : list) {
            //存储文件,生成文件下载地址 如:http://39.98.83.113:81/videos/micro/abc.mp4
            String imgLink = createLink(file,imgStoragePath);
            imgUrlList.add(imgLink);
        }
        return ResultUtils.errno(imgUrlList);
    }

然后JSON的返回值类型定义成

{
    // errno 即错误代码，0 表示没有错误。
    //       如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
    "errno": 0,

    // data 是一个数组，返回若干图片的线上地址
    "data": [
        "图片1地址",
        "图片2地址",
        "……"
    ]
}

好啦，大功告成！！！
下面是完成的效果图