项目场景:
在帮老师写系统的时候遇到要在el-dialog上面加一个富文本编辑器,1个晚上+1个早上,终于学会了怎么用,泪目。
我实现了仓库数据显示到富文本编辑器。
实现效果:
这里描述项目中遇到的问题:
遇到了一个问题,就是要点击按钮两次才能渲染出后端的数据。
后面换了一下思维,数据绑定不在modify按钮,而在el-dialog的show事件
<template>
<el-button type="text" @click="modify" >修改课程计划</el-button>
<el-dialog title="请输入新的课程计划" :visible.sync="dialogFormVisible_" @opened="show()" @closed="hide()" :before-close="handleClose">
<div id="editorElem" style="margin: 0% 4% 3% 2%;">
<p>欢迎使用 wangEditor 富文本编辑器</p>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click=" dialogFormVisible_ = false ">取 消</el-button>
<el-button type="primary" @click="modifyplan">确 定</el-button>
</div>
</el-dialog>
</template>
注:
this.getPlan.plan为我读取仓库的数据
methods: {
// 点击修改计划
modify () {
this.dialogFormVisible_ = true
},
// 确定修改课程计划
modifyplan () {
this.dialogFormVisible_ = false
// 把富文本的数据存到仓库里面
this.getPlan.plan = this.editor.txt.html()
// alert(this.editor.txt.html())
// 提交修改/富文本!!!
},
// 对编辑器进行加载
show () {
var editor = new E('#editorElem')
this.editor = editor
// 配置菜单栏,删减菜单,调整顺序
editor.config.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'justify', // 对齐方式
'undo', // 撤销
'redo' // 重复
]
editor.create()
this.editor.txt.html(this.getPlan.plan)
},
// 关闭时清空数据避免重叠
hide () {
this.editor.txt.html(this.getPlan.plan)
}
}