Spring Boot项目学习09之整合富文本编辑器

picacho_pkq

已于 2022-08-11 20:42:50 修改

阅读量1.6k

点赞数 2

分类专栏： SpringBoot 文章标签： spring boot javascript 前端

于 2022-08-09 21:41:54 首次发布

本文链接：https://blog.csdn.net/pikcacho_pkq/article/details/126255322

版权

SpringBoot 专栏收录该内容

32 篇文章 12 订阅

订阅专栏

1.富文本编辑器的作用

富文本编辑器，是一种可内嵌于浏览器，所见即所得的文本编辑器。富文本编辑器不同于文本编辑器（如 textarea 标签、input 标签），也可以叫做图文编辑器。在富文本编辑器里可以编辑非常丰富的内容，如文字、图片、表情、代码等。

以下是使用富文本编辑器的原因，也是富文本编辑器的优点：

需求变更导致，业务方提出的编辑需求越来越复杂
编辑的内容变得越来越复杂、越来越丰富
比起编辑 html，富文本编辑器更灵活
富文本编辑器功能丰富，满足大部分需求

2.wangEditor编辑器

wangEditor 是一款轻量级 web 富文本编辑器，配置方便，使用简单。
官网：官网
文档：文档
源码：源码

使用该文本编辑器主要是为了提供图文混排，字体调整，全屏编辑，多图上传等。

3.使用wangEditor编辑器

1.新建 wangEditorDemo.html 文件，并引入 wangEditor 的 js 文件。

<script type="text/javascript" src="//unpkg.com/wangeditor/dist/wangEditor.min.js">
</script>

2.编辑框 DOM，在页面中创建 id 为 postEditor 的 div 标签，定义它主要是为了编辑器的初始化工作。一种方法可以直接在 style 中设置 div 的宽度和高度，该宽高的值也会成为编辑器的宽高，也可以自己调整的。另外一种方法是在 wangEditor 初始化时通过 width 和 height 属性进行设置。

<div id="postEditor"></div>

3.初始化 wangEditor 对象，最后是初始化 wangEditor 对象，并对一些配置项进行设置。

<script type="text/javascript">
  // 初始化富文本编辑器 start

  const E = window.wangEditor;
  const editorD = new E("#postEditor");
  // 设置编辑区域高度为 750px
  editorD.config.height = 750;
  // 配置服务端图片上传地址
  editorD.config.uploadImgServer = "/uploadFiles";
  editorD.config.uploadFileName = "files";
  // 限制图片大小 2M
  editorD.config.uploadImgMaxSize = 2 * 1024 * 1024;
  // 限制一次最多能传几张图片 一次最多上传 5 个图片
  editorD.config.uploadImgMaxLength = 5;
  // 隐藏插入网络图片的功能
  editorD.config.showLinkImg = false;
  editorD.create();
</script>

将基本配置项设置完成后，最后一步就是 editorD.create()；wangEditor 对象就完成了创建。

4.获取文档内容，在整理好富文本内容并写到编辑器后，我们还需要将 wangEditor 编辑器中输入的文字内容取出来，并传给后端以进行逻辑处理。例如获取输入的文章详情内容，就可以用如下代码来获取。

var content = editorD.txt.html();

完整的前端代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>wangEditor 测试</title>
  </head>
  <body>
    wangEditor 富文本编辑器：

    <div id="postEditor"></div>

    <input type="button" onclick="getContent()" value="获取文档内容" />
  </body>
  <script
    type="text/javascript"
    src="https://unpkg.com/wangeditor/dist/wangEditor.min.js"
  ></script>
  <script type="text/javascript">
    // 初始化富文本编辑器 start

    const E = window.wangEditor;
    const editorD = new E("#postEditor");
    // 设置编辑区域高度为 750px
    editorD.config.height = 750;
    // 配置服务端图片上传地址
    editorD.config.uploadImgServer = "/uploadFiles";
    editorD.config.uploadFileName = "files";
    // 限制图片大小 2M
    editorD.config.uploadImgMaxSize = 2 * 1024 * 1024;
    // 限制一次最多能传几张图片 一次最多上传 5 个图片
    editorD.config.uploadImgMaxLength = 5;
    // 隐藏插入网络图片的功能
    editorD.config.showLinkImg = false;
    editorD.create();

    function getContent() {
      var content = editorD.txt.html();
      alert(content);
    }
  </script>
</html>

测试效果
在这里插入图片描述

4.完成图片上传功能

在UploadController类添加uploadV2方法

    @PostMapping({"/uploadFiles"})
    @ResponseBody
    public Result uploadV2(HttpServletRequest httpServletRequest) throws URISyntaxException {
        List<MultipartFile> multipartFiles = new ArrayList<>(8);
        CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(httpServletRequest.getSession().getServletContext());
        if (multipartResolver.isMultipart(httpServletRequest)) {
            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) httpServletRequest;
            Iterator<String> iter = multiRequest.getFileNames();
            int total = 0;
            while (iter.hasNext()) {
                if (total > 5) {
                    return ResultGenerator.genFailResult("最多上传5张图片");
                }
                total += 1;
                MultipartFile file = multiRequest.getFile(iter.next());
                multipartFiles.add(file);
            }
        }
        if (CollectionUtils.isEmpty(multipartFiles)) {
            return ResultGenerator.genFailResult("参数异常");
        }
        if (multipartFiles != null && multipartFiles.size() > 5) {
            return ResultGenerator.genFailResult("最多上传5张图片");
        }
        List<String> fileNames = new ArrayList(multipartFiles.size());
        for (int i = 0; i < multipartFiles.size(); i++) {
            String fileName = multipartFiles.get(i).getOriginalFilename();
            String suffixName = fileName.substring(fileName.lastIndexOf("."));
            //生成文件名称通用方法
            SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd_HHmmss");
            Random r = new Random();
            StringBuilder tempName = new StringBuilder();
            tempName.append(sdf.format(new Date())).append(r.nextInt(100)).append(suffixName);
            String newFileName = tempName.toString();
            File fileDirectory = new File(Constants.FILE_UPLOAD_DIC);
            //创建文件
            File destFile = new File(Constants.FILE_UPLOAD_DIC + newFileName);
            try {
                if (!fileDirectory.exists()) {
                    if (!fileDirectory.mkdir()) {
                        throw new IOException("文件夹创建失败,路径为：" + fileDirectory);
                    }
                }
                multipartFiles.get(i).transferTo(destFile);
                fileNames.add("/files/" + newFileName);
            } catch (IOException e) {
                e.printStackTrace();
                return ResultGenerator.genFailResult("文件上传失败");
            }
        }
        Result resultSuccess = ResultGenerator.genSuccessResult();
        resultSuccess.setData(fileNames);
        return resultSuccess;
    }

在wangEditorDemo.html里添加图片上传逻辑

    // 初始化富文本编辑器 start

    const E = window.wangEditor;
    const editorD = new E("#postEditor");
    // 设置编辑区域高度为 750px
    editorD.config.height = 550;
    // 配置服务端图片上传地址
    editorD.config.uploadImgServer = "/uploadFiles";
    editorD.config.uploadFileName = "files";
    // 限制图片大小 2M
    editorD.config.uploadImgMaxSize = 2 * 1024 * 1024;
    // 限制一次最多能传几张图片 一次最多上传 5 个图片
    editorD.config.uploadImgMaxLength = 5;
    // 隐藏插入网络图片的功能
    editorD.config.showLinkImg = true;

    // 完成图片上传
    editorD.config.uploadImgHooks = {
        // 图片上传并返回了结果，图片插入已成功
        success: function (xhr) {
            console.log('success', xhr)
        },
        // 图片上传并返回了结果，但图片插入时出错了
        fail: function (xhr, editor, resData) {
            console.log('fail', resData)
        },
        // 上传图片出错，一般为 http 请求的错误
        error: function (xhr, editor, resData) {
            console.log('error', xhr, resData)
        },
        // 上传图片超时
        timeout: function (xhr) {
            console.log('timeout')
        },
        customInsert: function (insertImgFn, result) {
            if (result != null && result.resultCode == 200) {
                // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
                result.data.forEach(img => {
                    insertImgFn(img)
                });
            } else {
                alert("error");
            }
        }
    }
    editorD.create();