vue 富文本(vue-quill-editor)的使用

1  下载插件

npm install vue-quill-editor –save

2  挂载或引入

        2.1 在组件中进行引入

          由于在一个项目中富文本使用的地方很少,所以不需全局注册

// 引入富文本
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

        2.2 或全局挂载

         在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 } */)

3  使用富文本

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

        

4  功能区的设置

  由于富文本的功能区默认有很多功能但是我们经常不需要那么多,所以就需要自定义设置

   代码如下

data () {
  return {
    editorOption: {
        placeholder: '',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }], // toggled buttons
            ['blockquote'],
            ['code-block', 'image', 'link']
          ]
        }
      }
    }
  }