前言,公司项目需要用到富文本编辑框,指定用百度的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();
保存成功后后端数据库存储的结果为
至此富文本框使用结束。不为别的仅此记录下自己的使用过程。