集成wangEditor富文本编辑器

最新推荐文章于 2022-10-19 17:54:35 发布

10年程序员

最新推荐文章于 2022-10-19 17:54:35 发布

阅读量743

点赞数

分类专栏： java js 工具文章标签： java

本文链接：https://blog.csdn.net/qq_35309973/article/details/123063147

版权

java 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

工具

3 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

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

亲测有效的教程！！！

下载： https://download.csdn.net/download/qq_35309973/81854812

首先下载wangEditor项目，下面是项目的结构。
在这里插入图片描述

将release复制到项目中，以下是我的项目
在这里插入图片描述

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wangEditor</title>
</head>
<body>
<form id="addForm">
    <div id="editor">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
    </div>
    <input >
</form>


<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
<script type="text/javascript" src="../static/js/jquery.min.js"></script>
<script type="text/javascript" src="../static/release/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 = 'myfile'; //设置文件上传的参数名称
    editor.customConfig.uploadImgServer = '/upload/editor/img'; //设置上传文件的服务器路径
    editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M


    //自定义上传图片事件
    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("上传超时");
        }
    };
    editor.create()
</script>
</body>
</html>

下面是后台的代码

 @ResponseBody
    @RequestMapping(value = "/editor/img",method = RequestMethod.POST)
    public Map EditorImgUpload(@RequestParam("myfile") List<MultipartFile> list) {
        //获取视频文件存储路径 如:videos/video
        String imgStoragePath = uploadSettings.getImgStoragePath();
        LinkedList<String> 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地址",
        "……"
    ]
}

好啦，大功告成！！！

10年程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
集成wangEditor富文本编辑器

以下是JavaWeb项目集成wangEditor富文本编辑器，wangEditor是一个轻量级的富文本编辑器，优点是：集成速度快，容易上手。缺点是：相对于百度Ue功能较少，不过也基本满足了我们所需的功能。亲测有效的教程！！！下载： https://download.csdn.net/download/qq_35309973/81854812首先下载wangEditor项目，下面是项目的结构。将release复制到项目中，以下是我的项目下面是前端展示页面的代码。代码中，图片的文件服务器地址要换成
复制链接

扫一扫