vue中引入wangEditor富文本编辑器，怎么控制数据回显

Z时代
2024-02-07
分类：IT

以父子组件方式进行传值，需要怎么才能进行数据的回显，搞不太明白这个编辑器
这是子组件

<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>