wangEditor富文本编辑器

wangEditor是一款基于JavaScript和CSS开发的Web富文本编辑器，它具有轻量级、简洁、易用的特点。相比于普通的文本编辑器，富文本编辑器可以输入超越文本的数据内容，包括上传图片、输入表情、字体大小字号调整、颜色设置、对齐方式等功能操作。[1]

在使用wangEditor富文本编辑器时，首先需要在代码中引入相关的文件。可以在editor.vue文件中添加以下代码：

<template>
  <div>
    <div ref="editor" style="text-align:left"></div>
  </div>
</template>

<script>
import E from 'wangeditor'

export default {
  name: 'MyEditor',
  data() {
    return {
      editorContent: '',
      editor: null
    }
  },
  props: {
    value: {
      type: String,
      required: true
    }
  },
  model: {
    prop: 'value'
  },
  methods: {
    getContent: function () {
      alert(this.editorContent)
    },
    _initEditor(that) {
      var editor = new E(this.$refs.editor)
      editor.config.zIndex = 100
      editor.create()
      that.editor = editor
    }
  },
  mounted() {
    this._initEditor(this)
    setTimeout(() => {
      this.editor.txt.html(this.value)
    }, 1000)
  }
}
</script>

<style scoped>
</style>

然后，可以在需要使用富文本编辑器的地方注册组件，并创建编辑器。可以使用以下代码：

<!-- 首先给出一个div，并设id属性 -->
<div id="div1"></div>
<script type="text/javascript">
  var E = window.wangEditor
  var editor = new E('#div1') // 创建编辑器
  editor.create()
</script>

以上是使用wangEditor富文本编辑器的基本介绍和使用方法。[1][2][3]