富文本编辑器 | wangeditor

wangeditor 大家一般用的比较多，是一款很简介的富文本编辑器，今天使用的时候，遇到了一些问题，分享给大家，避免踩坑。

一般我们使用时，都会把富文本编辑器抽成一个组件，然后其他界面调用，下面分享编辑器组件代码。

<template>
  <div ref="editor" />
</template>
<script>

  import E from ‘wangeditor‘

  export default {
    name: "TaRichEditor",
    props: {
      // 兼容之前的配置写法
      customConfig: {
        type: Object,
        default() {
          return {}
        },
      },
      // wangeditor2 版本的配置为config
      config: {
        type: Object,
        default() {
          return {}
        },
      },
      content: {
        type: String,
        default() {
          return ‘‘
        },
      },
      disabled: {
        type: Boolean,
        default: () => false,
      },
    },
    data() {
      return {
        editor: {},
      }
    },
    watch: {
      disabled(val) {
        this.setDisabled(val)
      },
      content(val) {
        this.setContent(val)
      }
    },
    mounted() {
      let editor = new E(this.$refs.editor);
      editor.config = Object.assign(editor.config,this.config,this.customConfig)
      editor.create();
      this.editor = editor
    },
    methods: {
      setDisabled(val) {
        if (val) {
          this.editor.disable()
        } else {
          this.editor.enable()
        }
      },
      //获取内容（html格式）
      getHtml() {
        return this.editor.txt.html();
      },
      //获取内容（文本格式）
      getText() {
        return this.editor.txt.text();
      },
      //设置内容
      setContent(content) {
        if (!this.disabled) {
          this.editor.txt.html(content);
        }
      },
      //追加内容
      appendContent(content) {
        if (!this.disabled) {
          this.editor.txt.append(content);
        }
      },
      //清空内容
      clearContent() {
        if (!this.disabled) {
          this.editor.clear();
        }
      },
    },
  }
</script>

<style scoped>
  .w-e-toolbar{
    flex-wrap:wrap;
  }
</style>

其他界面调用代码如下

<wangEditor ref="richEditor" :content="content"></wangEditor>

问题出现在初始化赋值的时候，会一直为空。原因是我们获取数据时，是异步操作，然后富文本编辑器创建时，值仍然是为空。

解决办法有两种：

1、像我代码中那样，监听content的值，然后变化时进行设置。

2、在调用界面获取到值之后，进行设值覆盖。

这两种办法我觉得都行，只是第一个可以不用再关注设值问题，第二个还要注意给富文本设值。

富文本编辑器 | wangeditor

原文：https://www.cnblogs.com/sixgodbiao/p/14038907.html