vue+element-ui 使用富文本编辑器

1. npm安装编辑器组件
   npm install vue-quill-editor –save
2. 在项目中引入quill-config.js文件（网上可以找到）
   
3. 在需要使用的页面引入（代码如下）

<template>
  <section>
    <el-form
      ref="forms"
      :model="form"
      :rules="rules"
      label-width="120px"
      @submit.prevent="onSubmit"
      style="margin:20px;margin-left:150px;width:60%;min-width:600px;"
    >
      <el-row>
        <el-col :span="10">
          <el-form-item label="富文本：" prop="content" style="margin-bottom:70px">
            <quill-editor
              class="ql-editor"
              ref="myTextEditor"
              style="width:800px;"
              :options="quillOption"
              v-model="form.content"
            ></quill-editor>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item class="subBtn">
        <elbutton type="primary" @click="subBtnFn('forms')">保存</el-button>
        <el-button @click="cancleFn">取消</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
import { Quill, quillEditor } from 'vue-quill-editor'
import quillConfig from '../../components/common/quill-config'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  components: {
    quillEditor
  },
	data() {
		return {
      form: {
        content: '', // 富文本
      },
      rules: {
        content: [{ required: true, message: '请编辑文本', trigger: 'blur' }]
      },
      editor: null, // 富文本编辑器对象
      editorOption: { //  富文本编辑器配置
        placeholder: '请输入',
        theme: 'snow', // or 'bubble'
        modules: {
          toolbar: {
            container: '#toolbar'
          }
        }
      },
      content: '<h2>hello quill-editor</h2>',
      quillOption: quillConfig
    }
  },
  mounted () {
  },
  methods: {
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
.nameInp {
  width: 284px;
}
.nameInps {
  width: 80%;
}
.subBtn {
  display: inline-block;
  margin-left: 26%;
  .el-button {
    width: 110px;
    margin-top: 10px;
  }
}
</style>

以上就是简单的在vue+element-ui 使用富文本编辑器，效果图如下：