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

发布于 2022-09-13 00:01:43 字数 2254 浏览 56 评论 0

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

<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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

江挽川 2022-09-20 00:01:43

父组件 value='数据'

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文