vue中引入wangEditor富文本编辑器,怎么控制数据回显
以父子组件方式进行传值,需要怎么才能进行数据的回显,搞不太明白这个编辑器
这是子组件
<template>
<div class="editor">
<div ref="toolbar" class="toolbar"></div>
<div ref="editor" class="text"></div>
</div>
</template>
<script>
import E from "wangeditor";
export default {
props: {
value: {
type: String,
default: "",
},
meanArray: {
// 自定义菜单
type: Array,
default: null,
},
},
model: {
prop: "value",
event: "change",
},
watch: {
value: function (value) {
console.log(value);
if (value !== this.editor.txt.html()) {
this.editor.txt.html(this.value);
}
},
},
data() {
return {
// 默认有这么多菜单,meanArray有值以meanArray为准
defaultMeanus: [
"head",
"bold",
"fontSize",
"italic",
"underline",
"strikeThrough",
"foreColor",
"backColor",
"list",
"justify",
"image",
"undo",
"redo",
],
editor: "",
};
},
methods: {
init() {
const _this = this;
this.editor = new E(this.$refs.editor);
this.editor.config.uploadImgShowBase64 = true; // 使用 base64 保存图片
this.setMenus(); //设置菜单
this.editor.config.onchange = (html) => {
_this.$emit("change", html); // 将内容同步到父组件中
};
this.editor.config.height = 170;
this.editor.config.focus = false;
this.editor.create(); //创建编辑器
},
setMenus() {
// 设置菜单
if (this.meanArray) {
this.editor.config.menus = this.meanArray;
} else {
this.editor.config.menus = this.defaultMeanus;
}
},
getHtml() {
// 得到文本内容
return this.editor.txt.html();
},
setHtml(txt) {
// 设置富文本里面的值
this.editor.txt.html(txt);
},
},
mounted() {
let that = this;
that.$nextTick(function () {
that.init();
});
},
};
</script>
父组件
<Editor
v-model="form.strGenerallySeen"
style="text-align:left;width:95.5%;!important;margin-left:2.5%;"
ref="editorOne"
isClear="false"
@change="change"
></Editor>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
父组件 value='数据'