富文本编辑器vue-quill-editor的最简单用法

一.背景

最近项目中需要用到富文本编辑器,发现vue-quill-editor这款富文本编辑器还挺不错的,在github上使用率也比较高,很适合咱们的vue项目,话不多说,直接上手了

二.Vue-Quill-Editor使用

1.简介

基于 Quill,适用于Vue的富文本编辑器,支持服务端渲染和单页应用.不过有一定的兼容性,就是兼容IE10+

2.安装

npm install vue-quill-editor -S

当然,也可以使用CDN的方式引入,我们这里讲NPM安装

3.挂载到项目

1.全局挂载

// main.js

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme

Vue.use(VueQuillEditor, /* { default global options } */)

2.组件中挂载

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  }
}

我们在开发中,使用到富文本,最多也就那么几个地方,所以不用使用全局挂载,直接在封装成组件,在组件中挂载即可!

4.组件中使用

在template中去使用组件,这里,我们有两种方式:一种是支持双向数据绑定的,一种是手动控制数据同步的

1.双向数据绑定示例

<template>
 <!-- Two-way Data-Binding -->
  <quill-editor
    ref="myQuillEditor"
    v-model="content"
    :options="editorOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @ready="onEditorReady($event)"
    @change="onEditorChange($event)"
  />    
</template>

2.手动控制数据的同步

<!-- Or manually control the data synchronization -->
  <quill-editor
    :content="content"
    :options="editorOption"
    @change="onEditorChange($event)"
  />

既然是Vue项目,我们这当然是使用支持双向数据绑定的

5.在script中的配置

1.基本配置

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { quillEditor } from "vue-quill-editor";

export default {
  components: {
    quillEditor
  },
   data () {
      return {
        // 富文本编辑器默认内容
        content: '<h2>I am Example</h2>',
        //富文本编辑器配置
        editorOption: {
          // Some Quill options...
        }
      }
    },
    methods: {
      //失去焦点事件
      onEditorBlur(quill) {
        console.log('editor blur!', quill)
      },
      //获得焦点事件
      onEditorFocus(quill) {
        console.log('editor focus!', quill)
      },
      // 准备富文本编辑器
      onEditorReady(quill) {
        console.log('editor ready!', quill)
      },
      //内容改变事件(通常我们通过这个事件来获取内容，所以这个事件比较重要)
      onEditorChange({ quill, html, text }) {
        console.log('editor change!', quill, html, text)
        this.content = html
      }
    }
}

配置到这里,一个最简单最基础的富文本编辑器就出来啦！！！

注意：这里加粗了是因为我们在content中加了h2标签