项目需求
Dialog弹框中显示wangEditor富文本,并且每次打开时富文本内容清空以及el-input中有值的话,点击打开富文本回显输入框中的值。
效果图
1、安装脚手架
npm install wangeditor --save
2、引入脚手架
import E from "wangeditor";
3、使用
<div v-for="(item,index) in riskManagementList" :key="index">
<div>{{item.name}}</div>
<div style="margin: 20px 0;"></div>
<!-- 给input添加双击事件,双击打开富文本-->
<div @dblclick="doubleClick(item,'value')" >
<el-input
type="textarea"
:autosize="{ minRows: 1, maxRows: 2}"
placeholder="请输入内容"
v-model="item.value"
>
</el-input>
</div>
</div>
<el-dialog
title="填写信息"
:visible.sync="dialogVisible"
@opened="show()"
@closed="hide()"
:before-close="handleClose"
>
<!-- 设置富文本-->
<div class="rttextcont">
<div ref="editor"></div>
</div>
<span
slot="footer"
class="dialog-footer"
>
<el-button
type="info"
plain
@click="cancel()"
>取 消</el-button>
<el-button
type="danger"
plain
@click="empty()"
>清 空</el-button>
<el-button
type="success"
plain
@click="confirm()"
>确 定</el-button>
</span>
</el-dialog>
4、js
export default {
data() {
return {
riskManagementList: [
{ name: '所属的公司类型:', value: '' },
{ name: '报告期内采取的风险管理改进措施以及各项措施的实施进展情况:', value: '' },
{ name: '风险管理能力自评估有关情况:', value: '' },
],
}
}
methods: {
//dialog显示
show() {
//创建新的富文本编辑器
this.editor = new E(this.$refs.editor);
this.editor.create();
//判断原本输入框中是否有值,如果有值则回填到富文本里,如果没值,则创建空的富文本进行编辑
if (this.detailRow.value) {
this.editor.txt.html(this.detailRow.value);
} else {
this.editor.txt.html('');
}
},
//关闭时清空数据避免富文本重复出现,数据重叠
hide() {
this.$refs.editor.innerHTML = '';
this.editor.destroy();
this.editor = null;
},
//双击输入框,打开富文本编辑器
doubleClick(row, type) {
//获取输入框中的数据方便回显
this.detailRow = row
this.detailType = type
this.dialogVisible = true;
},
//dialog确认
confirm() {
//this.editor.txt.html()为获取富文本的内容(详情请看官方文档)
const fhtml = this.editor.txt.html();
//将富文本内容显示到输入框里
let detailRowValue = this.detailType + '';
this.detailRow[detailRowValue] = fhtml;
this.dialogVisible = false;
this.detailRow = []
},
//富文本清空(详情请看官方文档)
empty() {
this.editor.txt.clear();
},
//dialog取消
cancel() {
this.dialogVisible = false;
},
// // 弹窗关闭
handleClose(done) {
this.dialogVisible = false;
done();
},
}
},
最终实现效果图
官方文档地址
https://www.wangeditor.com/doc/