180 lines
5.9 KiB
Vue
180 lines
5.9 KiB
Vue
<!--
|
||
* @FileDescription: 富文本框
|
||
* @Author: ztc
|
||
* @Date: 2023年03月22日
|
||
* @Params(调用时 v-model 绑定 父组件值)
|
||
* @Params(needImage) 是否需要 上传图片 默认关闭
|
||
* @Params(imageUrl) 图片上传地址
|
||
* @Params(data key-val 键值对) 图片上传附加参数
|
||
-->
|
||
|
||
<template>
|
||
<div class="w_editor">
|
||
<!-- 富文本编辑器 -->
|
||
<div ref="w_view"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
//自定义字体类型
|
||
/*富文本编辑图片上传配置*/
|
||
const uploadConfig = {
|
||
action: '' // 必填参数 图片上传地址
|
||
};
|
||
// 引入富文本
|
||
import WE from "wangeditor";
|
||
// 引入elementUI Message模块（用于提示信息）
|
||
import { Message } from "element-ui";
|
||
|
||
export default {
|
||
name: "wangEditor",
|
||
model: {
|
||
prop: 'desc',
|
||
event:'change'
|
||
},
|
||
props:{
|
||
desc:{
|
||
type:String,
|
||
default:""
|
||
},
|
||
//业务中我们经常会有添加操作和编辑操作，添加操作时，我们需清除上一操作留下的缓存
|
||
isClear:{
|
||
type:Boolean,
|
||
default:false
|
||
},
|
||
needImage:'',
|
||
imageUrl:'',
|
||
data:{},
|
||
showFullScreen: {
|
||
type:Boolean,
|
||
default:true
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
info_:null,
|
||
isChange:false,
|
||
// 编辑器实例
|
||
editor: null,
|
||
// 富文本菜单选项配置
|
||
menuItem: [
|
||
"head",
|
||
"bold",
|
||
"fontSize",
|
||
"fontName",
|
||
"italic",
|
||
"underline",
|
||
"indent",
|
||
"lineHeight",
|
||
"foreColor",
|
||
"backColor",
|
||
"link",
|
||
"list",
|
||
"justify"
|
||
]
|
||
};
|
||
},
|
||
watch: {
|
||
// 监听默认值
|
||
isClear(val){
|
||
// console.log(val)
|
||
if (val){
|
||
this.editor.txt.clear()
|
||
}
|
||
},
|
||
//接收父组件传递过来的值
|
||
desc(value){
|
||
//判断父组件传递过来的值跟当前编辑器内容是否一样
|
||
if (value != this.editor.txt.html()) {
|
||
this.editor.txt.html(this.desc)
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.initEditor();
|
||
if(this.editor){
|
||
this.editor.txt.html(this.desc)
|
||
}
|
||
},
|
||
methods: {
|
||
clearText(){
|
||
if (this.editor) {
|
||
this.editor.txt.clear()
|
||
}
|
||
},
|
||
// 初始化编辑器
|
||
initEditor() {
|
||
if(this.needImage){
|
||
this.menuItem.push("image")
|
||
}
|
||
// 获取编辑器dom节点
|
||
const editor = new WE(this.$refs.w_view);
|
||
// 配置编辑器
|
||
editor.config.showLinkImg = false; /* 隐藏插入网络图片的功能 */
|
||
editor.config.onchangeTimeout = 5000; /* 配置触发 onchange 的时间频率，默认为 200ms */
|
||
editor.config.uploadImgMaxLength = 1; /* 限制一次最多能传几张图片 */
|
||
editor.config.showFullScreen = this.showFullScreen; /* 配置全屏功能按钮是否展示 */
|
||
editor.config.menus = [...this.menuItem]; /* 自定义系统菜单 */
|
||
// editor.config.uploadImgMaxSize = 5 * 1024 * 1024 /* 限制图片大小 */;
|
||
editor.config.customAlert = err => {
|
||
Message.error(err);
|
||
};
|
||
// 监控变化，同步更新数据
|
||
editor.config.onchange = newHtml => {
|
||
// this.isChange = true;
|
||
// // 异步更新组件富文本值的变化
|
||
// // this.defaultText=newHtml
|
||
// this.$emit("update:rich-text", newHtml);
|
||
this.info_ = newHtml // 绑定当前逐渐地值
|
||
this.$emit('change', this.info_) // 将内容同步到父组件中
|
||
};
|
||
|
||
// 自定义上传图片
|
||
editor.config.customUploadImg = (resultFiles, insertImgFn) => {
|
||
let param = new FormData(); // 创建form对象
|
||
param.append("filename", "test");
|
||
param.append("file", resultFiles[0]);
|
||
for(let i in this.data){
|
||
param.append(this.data[i].key,this.data[i].val)
|
||
}
|
||
// 一般项目中都会封装好发送请求得方法,我这为了通用直接用axios
|
||
axios.post(this.imageUrl, param).then(res => {
|
||
// res是上传成功后返回的数据,返回的数据中需要有上传图片的路径,
|
||
// 通过insert方法将路径传入,即可将图片在富文本中插入
|
||
if (res.status === 200) {
|
||
// 我这返回的是JSON数据,需要解析
|
||
let path = res.data.data.fileUrl
|
||
|
||
// 上传代码返回结果之后，将图片插入到编辑器中
|
||
insertImgFn(path);
|
||
}
|
||
});
|
||
|
||
};
|
||
|
||
// 创建编辑器
|
||
editor.create();
|
||
this.editor = editor;
|
||
}
|
||
},
|
||
beforeUnmount() {
|
||
// 销毁编辑器
|
||
this.editor.destroy();
|
||
this.editor = null;
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
.w-e-toolbar{
|
||
z-index: 1 !important;
|
||
}
|
||
.w-e-menu {
|
||
z-index: 2 !important;
|
||
}
|
||
.w-e-text-container {
|
||
z-index: 1 !important;
|
||
height: auto;
|
||
}
|
||
</style>
|