1.安装富文本插件wangeditor
npm install --save wangeditor
2.使用wangeditor
- 引入wangeditor
import E from "wangeditor";
- 创建渲染区域
<div id="content"></div>
- 初始化实例
this.editor = new E( document.getElementById('content') ) this.editor.config.uploadImgShowBase64 = true this.editor.config.showLinkImg = false this.editor.create()
Vue部分代码(大部分代码已删减,只留相关部分代码)
<template>
<div class="container">
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="详情" prop="content">
<div id="content"></div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { addMsg, getMsg, updateMsg } from '@/api/Msg'
import E from "wangeditor";
export default {
name: "Text",
data() {
return {
title: "",
// 是否显示弹出层
open: false,
rules: {
content: [
{ required: true, message: '请输入详情', trigger: 'change' }
]
},
editor: null
};
},
created() {
},
methods: {
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加";
this.editor = null
setTimeout(() => {
this.editor = new E(document.getElementById('content'))
this.editor.config.uploadImgShowBase64 = true
this.editor.config.showLinkImg = false
this.editor.create()
}, 1000)
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getMsg(id).then(response => {
this.form = response.data.data;
this.open = true;
this.title = "修改";
setTimeout(() => {
this.editor = new E(document.getElementById('content'))
this.editor.config.uploadImgShowBase64 = true
this.editor.config.showLinkImg = false
this.editor.create()
this.editor.txt.append(this.form.content)
}, 1000)
});
},
reset() {
if (this.editor != null) {
///销毁编辑器
this.editor.destroy()
this.editor = null
}
this.form = {
content: null
};
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.form.content = this.editor.txt.html()
if (this.form.id != null) {
updateMsg(this.form).then((res) => {
this.$message({
message: '修改成功',
type: 'success'
});
this.open = false;
this.getList()
})
}
else {
addMsg(this.form).then((res) => {
this.$message({
message: '新增成功',
type: 'success'
});
this.open = false;
this.getList()
})
}
}
});
},
}
};
</script>
Java代码
工具类
public class UpLoadUtils {
public static boolean upHtml(String title,String content,String path){
StringBuilder stringBuilder = new StringBuilder();
stringBuilder.append("<html xmlns=\"http://www.w3.org/1999/xhtml\">");
stringBuilder.append("<head>");
stringBuilder.append("<title>");
stringBuilder.append(title);
stringBuilder.append("</title>");
stringBuilder.append("</head>");
stringBuilder.append("<body>");
stringBuilder.append(content);
stringBuilder.append("</body></html>");
try{
File file = new File(path);
if (file.getParentFile() != null || !file.getParentFile().isDirectory()) {
// 创建文件
file.getParentFile().mkdirs();
}
//将HTML文件内容写入文件中
FileOutputStream fileOutputStream=new FileOutputStream(path);
PrintStream printStream=new PrintStream(fileOutputStream);
// 转码,转化为utf-8
String htmls = new String(stringBuilder.toString().getBytes("utf-8"),"utf-8");
printStream.println(htmls);
fileOutputStream.flush();
printStream.flush();
fileOutputStream.close();
printStream.close();
return true;
}catch (Exception e) {
e.printStackTrace();
return false;
}
}
}
业务部分(以增添为例)
@PostMapping("/addMsg")
public CommonResult<Object> addMsg(@RequestBody Msg msg){
msg.setCreateTime(LocalDateTime.now());
String path = Constant.htmtUrl+UUID.randomUUID()+".html";
boolean flag = UpLoadUtils.upHtml(msg.getTitle(),msg.getContent(),path);
if (!flag){
return new CommonResult<>(200,null,"生成失败");
}
msg.setUrl(path);
msgMapper.insert(msg);
return new CommonResult<>(200,null,"添加成功");
}