vue+ueditor+springBoot自用总结

前言，公司项目需要用到富文本编辑框，指定用百度的ueditor说功能强大。那就用呗。因为公司前后分离，所以要分开搞。

第一步下载ueditor

我们要用到的是UTF8-jsp版本
下载地址 点击下载

除了jsp文件夹和index.html文件外，把所有的文件都复制到前台目录下的static里文件夹里，如下图：

第二步封装前台组件，引用

组件代码如下

<template>
  <div>
    <script id="editor" type="text/plain"></script>
  </div>
</template>

<script>
export default {
  name: "UE",
  data() {
    return {
      editor: null,
    };
  },
  props: {
    defaultMsg: {
      type: String,
      default: "",
    },
    config: {
      type: Object,
    },
  },
  mounted() {
    const _this = this;
    this.editor = UE.getEditor("editor", this.config); // 初始化UE
    this.editor.addListener("ready", function () {
      _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。
    });
  },
  watch: {
    defaultMsg(newVal) {
      this.editor.setContent(newVal);
    },
  },
  methods: {
    getUEContent() {
      // 获取内容方法
      return this.editor.getContent();
    },
    setText(con) {
      const _this = this;
      _this.editor.setContent(con);
    },
  },
  destroyed() {
    this.editor.destroy();
  },
};
</script>

<style scoped>
</style>```
然后 修改vue项目的main.js 加入以下引用

```bash
import '../static/ueditor//ueditor.config'
import '../static/ueditor/ueditor.all'
import '../static/ueditor/lang/zh-cn/zh-cn'
import '../static/ueditor/ueditor.parse.min'

修改ueditor.config.js的 UEDITOR_HOME_URL

因为我们是放在static下ueditor

然后在我们要用的地方引入组件
import editor from “@/components/ue”; 根据自己的路径引用

<editor :defaultMsg="form.content" ref="ue"></editor>

此时富文本编辑框就能显示了，但是图片上传功能是不能用的，因为需要后端配置。

这里解决个小bug,如果你点击上传图片，可是传图的弹框被遮盖拉，那么修改下ueditor.config.js 里的zIndex 参数改为 9999即可

第三步后端配置

• 准备工作：
  把之前我们下载的ueditor 里jsp中的config.json文件放入我们项目resources下
  

然后我们会看到在lib里面有几个jar包

那么我们这里用pom形式引入

<dependency>
			<groupId>commons-io</groupId>
			<artifactId>commons-io</artifactId>
			<version>2.4</version>
		</dependency>
		<dependency>
			<groupId>commons-codec</groupId>
			<artifactId>commons-codec</artifactId>
			<version>1.10</version>
		</dependency>
			<dependency>
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.3.1</version>
		</dependency>

5个jar包，其实引入这三个就够了。

• 准备工作完成后：
  图片上传的配置需要后端参与配置，首先更改前台vue项目的editor的ueditor.config.js 里的serverUrl配置
  
  这里就是访问后端图片保存配置的地址，相应的我们后端要建立controller与之对应

@RestController
@RequestMapping("ueditor")
public class UeController {

    @RequestMapping(value = "config")
    public void enterUE(HttpServletRequest request, HttpServletResponse response) {
        try {
            request.setCharacterEncoding("utf-8");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        response.setHeader("Content-Type", "text/html");
        //String rootPath = request.getSession().getServletContext().getRealPath("/");mvc项目获取路径
        String rootPathS = ClassUtils.getDefaultClassLoader().getResource("").getPath();
        try {
            String exec = new ActionEnter(request, rootPathS).exec();
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

ActionEnter 是需要将editor下载的Java源码复制到我们项目的
链接：源码下载
提取码：5678
上面源码下载下来后直接带文件夹放入我们项目中

导入项目中后，（这个源码是已经修改好的，完全根据我上面的步奏路径改好的）。后面只需要更改BinaryUploader文件中的这几处，根据自己实际情况，做文件的保存

如想自定义那你需要知道代码流程，如下。无需改动的请跳过。

上图仅适用本地读取，放在Linux上读取不到。
下面修改：

  private String getConfigPath() {
        InputStream is = this.getClass().getResourceAsStream("/" + ConfigManager.configFileName);
        BufferedReader br = new BufferedReader(new InputStreamReader(is));
        String s = "";
        String configContentStr = "";
        try {
            while ((s = br.readLine()) != null) {
                configContentStr = configContentStr + s;
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
        return configContentStr;
    }

这里已经读取到文件内容了，第五步就不用读了，去掉this.readFile

已上都配置完后，我们可以直接访问下我们ueditor的controller路径看是否配置完成

http://localhost:8101/ueditor/config?action=config&noCache=1627864262730

读取成功json后的返回，如果不是这个结果，那么问题就在于json文件没有读取成功。

结尾

以上后端配置完成后，接口是通的。然后我们就能得到一下情形

此时多图上传已实现，单图的不在解释。

此时前端获取富文本编辑框的内容就是

 this.$refs.ue.getUEContent();

保存成功后后端数据库存储的结果为

至此富文本框使用结束。不为别的仅此记录下自己的使用过程。