NPM版本"wangeditor": "^4.7.4"
isClear2默认false 监听触发清空组件内的富文本编辑器
一般是关闭弹框之类的使用
change也没用上 根据需求来吧
页面注册引用<EditorThree ref="editorTwo"v-model="formInfo.data.levelInfo":isClear2="isClear2"@change="change2"></EditorThree>
下面为富文本编辑器封装的单组件
<template lang="html"> <div ref="editor" class="text"> </div> </template> <script>import E from "wangeditor";// import "wangeditor/release/wangEditor.min.css";export default {name: "editoritem",data () {return {// uploadPath,editor: null,info_: null};},model: {prop: "value",event: "change2"},props: {value: {type: String,default: ""},isClear2: {type: Boolean,default: false}},watch: {isClear2 (val) {// 触发清除文本域内容if (val) {this.editor.txt.clear();this.info_ = null;}},value: function (value) {if (value !== this.editor.txt.html()) {this.editor.txt.html(this.value);}}//value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值},mounted () {this.seteditor();this.editor.txt.html(this.value);},methods: {seteditor () {// this.editor = new E(this.$refs.toolbar, this.$refs.editor);this.editor = new E(this.$refs.editor);// 配置菜单this.editor.config.menus = [// "head", // 标题"bold", // 粗体"fontSize", // 字号"fontName", // 字体"italic", // 斜体"underline", // 下划线"strikeThrough", // 删除线"foreColor", // 文字颜色"link", // 插入链接"list", // 列表"justify", // 对齐方式"quote", // 引用// 'image', // 插入图片"location" // 位置];this.editor.config.onchange = html => {this.info_ = html; // 绑定当前逐渐地值this.$emit("change2", this.info_); // 将内容同步到父组件中};// 设置高度this.editor.config.height = 200;// 创建富文本编辑器this.editor.create();}}};</script> <style lang="css" scoped></style>
