文本编辑器-vue-quill-editor

一、在main.js里引入

import Vue from 'vue'

import VueQuillEditor from 'vue-quill-editor'

Vue.use(VueQuillEditor)

二、在须要的页面引入

// 必定要引入这三个css，否则文本编辑器会出现不规则黑白几何图形
// 这三个css能够在main.js中引入，也能够在具体使用的.vue文件中引入
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

三、

<template>
  <el-row>
   <quill-editor v-model="content"
    :options="editorOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @change="onEditorChange($event)">
   </quill-editor>
 </el-row>
</template>

<script>
// import { quillEditor } from 'vue-quill-editor'

export default {
  name: 'fueditor',
  data () {
    return {
      content: '',
      editorOption: {}
    }
  },
  methods: {
    onEditorBlur (editor) { // 失去焦点事件
    },
    onEditorFocus (editor) { // 得到焦点事件
    },
    onEditorChange ({editor, html, text}) { // 编辑器文本发生变化
      // this.content能够实时获取到当前编辑器内的文本内容
      console.log(this.content)
    }
  }
}
</script>

<style>
/* 设置编辑器的高度 */
.quill-editor {
  height: 800px;
 }
</style>