创建一个简单的富文本编辑器

这里使用的是  wangEditor 5  可详细查阅官方文档：https://www.wangeditor.com/

一：安装包

• npm install wangeditor

二：引入

import E from "wangeditor”; // 引入组件

三：创建富文本容器

<div id="wangeditor">
    <div ref="editorElem"></div>
</div>

四：获取组件实例并构造编辑器

export default {
  data() {
    return {
      editor: null
    }
  },
  mounted() {
    // 获取组件并构造编辑器
    this.editor = new E(this.$refs.editorElem) 
    this.editor.create()
  }
}

 完整代码示例：

<template>
  <div id="wangeditor">
    <div ref="editorElem"></div>