网页中嵌套富文本编辑器

前言

有时候，我们会在自己的网页上自己的网页上嵌套富文本编辑器，在我们做网页的时候，经常会碰到类似的需求。这篇文章我就带大家，怎么整合富文本编辑器。

集成过程

我们选择的是wangeditor
官网如下：https://www.wangeditor.com/v4/

npm安装

npm i wangeditor --save
npm i highlight.js --save

在需要构建的页面中加入引用

import E from "wangeditor"
import hljs from 'highlight.js'

准备页面

构建一个富文本的页面

 <div id="editor"></div>

根据富文本的页面要构建填充哪些功能

setRichText() {
  this.$nextTick(() => {
    this.editor = new E(`#editor`)
    this.editor.highlight = hljs
    this.editor.config.uploadImgServer = this.$baseUrl + '/files/editor/upload'
    this.editor.config.uploadFileName = 'file'
    this.editor.config.uploadImgHeaders = {
      token: this.user.token
    }
    this.editor.config.uploadImgParams = {
      type: 'img',
    }
    this.editor.create()  // 创建
  })
},

根据富文本请求构建后端代码

换言之就是配置服务端接口
我么来看看官网对接口的的是怎么设计的

设计富文本编辑图片上传的请求的返回格式

设计后端请求api

/**
 * 富文本文件上传
 */
@PostMapping("/editor/upload")
public Dict editorUpload(MultipartFile file) {
    String flag;
    synchronized (FileController.class) {
        flag = System.currentTimeMillis() + "";
        ThreadUtil.sleep(1L);
    }
    String fileName = file.getOriginalFilename();
    try {
        if (!FileUtil.isDirectory(filePath)) {
            FileUtil.mkdir(filePath);
        }
        // 文件存储形式：时间戳-文件名
        FileUtil.writeBytes(file.getBytes(), filePath + flag + "-" + fileName);  // ***/manager/files/1697438073596-avatar.png
        System.out.println(fileName + "--上传成功");

    } catch (Exception e) {
        System.err.println(fileName + "--文件上传失败");
    }
    String http = "http://" + ip + ":" + port + "/files/";
    return Dict.create().set("errno", 0).set("data", CollUtil.newArrayList(Dict.create().set("url", http + flag + "-" + fileName)));
}