wangEditor富文本编辑器（第一章：基础使用）

提示：后台系统中经常会遇见富文本，其中包括图片的上传，添加样式、链接等。本文使用wangEditor实现富文本功能

---

前言

---

一、富文本是什么？

第一次接触富文本，那么什么是富文本呢？
富文本是一种类似DOC格式（Word文档）的文件，有很好的兼容性，使用Windows“附件”中的“写字板”就能打开并进行编辑。
直观点，就是下图这样可以自己调节格式的就是富文本。

本文使用wangEditor实现富文本功能。由于一个项目中可能有很多地方都会使用富文本编辑器，所以我会将富文本写成一个组件，减少重复代码。介于本次使用的富文本很多功能需要自己配置以及拓展，那我我将分为几章来讲解。话不多说，我们开始吧~

二、基础使用方法

首先我们在src/components下面新建MyEditor文件夹，再新建editor.vue和index.js，目录结构如下：

1.安装wangEditor

首先我们要先安装wangEditor
安装命令如下：

npm i wangeditor --save

2.引入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>

3.注册组件

引入编辑器后我们开始注册组件，在index.js中写入以下代码
代码如下：

import E from "wangeditor";
import MyEditor from './editor.vue'

const install = (Vue, globalOptions) => {
  if (globalOptions) {
    MyEditor.props.globalOptions.default = () => globalOptions
  }
  Vue.component(MyEditor.name, MyEditor)
}

const vueMyEditor = { E, MyEditor, install }

export default vueMyEditor
export { E, MyEditor, install }

4.使用组件

这下注册了，我们可以开始使用组件了，当然使用前要引入

代码如下：

<template>
  <MyEditor id="editor" ref="editor" v-model="form.content">   </MyEditor>
</template>
<script>
import MyEditor from '@/components/MyEditor/editor.vue'
export default {
  components: {
    MyEditor
  },
  data() {
    return {
		    form:{
		    content:''
		    }
    }
  },
   methods: {
   }
}
</script>
<style lang="scss" scoped>
</style>

此时运行项目可以发现。富文本已经出现了，如图：

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了wangEditor的使用，如果还需要配置其他的功能，请继续下一吧。

下一章： **wangEditor富文本编辑器（第二章：字数限制）