wangeditor4在vue2项目中的基本使用及遇见的问题

wangeditor4是较为常用的富文本编辑器，在vue项目的使用过程中，出现了一些问题，此问题仅限于版本4，版本5并未进行验证。具体效果可直接复制到vue文件中进行查看。以下为该编辑器的基本使用以及我在使用过程中遇见的问题。

1. 安装编辑器依赖

// 本文安装的版本为 4.7.11
npm i wangeditor --save 

2. 子组件代码

<template>
  <div id="editorDom"></div>
</template>

<script>
import E from 'wangeditor'

export default {
  name: 'textEditor',
  data() {
    return {
      editor: ''
    }
  },
  mounted() {
    // 初始化编辑器
    this.initEditor()
  },
  methods: {
    initEditor() {
      let _this = this
      this.editor = new E('#editorDom')
      this.editor.config.focus = false // 取消光标自动定位
      // 实时监听编辑器内容，实时传输数据到父组件 ｜需要区分版本，不同版本，change事件写法不同
      this.editor.config.onchange = function (newHtml) {
        let content = _this.editor.txt.html()
        let text = _this.editor.txt.text()
        // 对于一键格式化后的内容，空内容可能会出现<p></br></p>标签，此处进行判断
        if (_this.isEmptyEditor()) {
          content = ''
        }
        _this.$emit('catchData', content,text)
      }
      this.editor.create()
    },
    isEmptyEditor() {
      const children = this.editor.$textElem.children()
      for (let i = 0; i < children.elems.length; i++) {
        const node = children.elems[i]
        if (node && node.nodeType === Node.TEXT_NODE && node.textContent.trim().length !== '') {
          return false
        }
        if (node && node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === 'p' && node.innerText.trim() !== '') {
          return false
        }
      }
      return true
    }
  },
}
</script>

<style scoped>

</style>

3. 父组件代码

<template>
<!--  父组件-->
  <div class="show-editor">
    <div class="editor-part">
      <div class="title">
        <h1>富文本编辑器 wangeditor4</h1>
        <p>
          <a href="www.wangeditor.com/v4">官方文档</a>
        </p>
      </div>
      <div class="editor-area">
        <textEditor @catchData="catchData" ref="editorRef"></textEditor>
      </div>
      <div class="operation-part">
        <div class="opera-btns">
          <p class="show-btn">获取编辑器html：</p>
          <p class="show-content">{{editorContentObj.htmlContent}}</p>
        </div>
        <div class="opera-btns">
          <p class="show-btn">获取编辑器text：</p>
          <p class="show-content">{{editorContentObj.textContent}}</p>
        </div>
        <div class="opera-btns">
          <p class="show-btn cp" @click="clearEditor">清空编辑器内容</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import textEditor from './textEditor.vue'

export default {
  name: 'testWangeditor',
  components: {
    textEditor
  },
  data() {
    return {
      editorContentObj: {
        htmlContent: '',
        textContent: ''
      }
    }
  },
  methods: {
    // 获取子组件传值
    catchData(content, text) {
      this.editorContentObj = {
        htmlContent: content,
        textContent: text
      }
    },
    // 清空编辑器内容
    clearEditor() {
      this.$refs.editorRef.editor.txt.clear()
    }
  },
}
</script>

<style scoped>
.cp {
  cursor: pointer;
  color: #2aa4f1;
}
.show-editor {
  background-color: #ffffff;
  height: 100vh;
}

.editor-part {
  width: 80%;
  margin: auto;
}

.editor-part .title {
  text-align: center;
}

.editor-part .title h1 {
  font-size: 18px;
}

.operation-part {
  margin-top: 20px;
}

.operation-part .opera-btns {
  margin-bottom: 10px;
  display: flex;
}

</style>

4.问题

// 1. 在使用过程中，出现了光标自动定位到编辑器，以至于在中文输入法的情况下，输入的第一个汉字会变为字符，为了解决此问题，在编辑器使用过程中，设置取消自动聚焦
this.editor.config.focus = false
// 2. 监听编辑器内容，编辑器作为子组件向父组件传值有一定时间间隔，本文中我使用编辑器的onchange事件，即时获取编辑器内容，需要注意不同版本，change事件写法不同
this.editor.config.onchange = function (newHtml) {
        let content = _this.editor.txt.html()
        let text = _this.editor.txt.text()
        // 对于一键格式化后的内容，空内容可能会出现<p></br></p>标签，此处进行判断
        if (_this.isEmptyEditor()) {
          content = ''
        }
        _this.$emit('catchData', content,text)
      }
// 3. 光标乱跳问题，一般是父子组件双向传值，使得编辑器的内容进行了多次更新，光标才会自动回到内容最后，可添加布尔变量进行控制

wangeditor官方文档：www.wangeditor.com/v4

5.实际效果