文本編輯器-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>