quill-vuejs

Quill editor component for Vue.

基于 Quill、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用。

Preview

Example

• CDN example page
• Component example page

Install

NPM

npm install quill-vuejs --save

# or
yarn add quill-vuejs

CDN

 <div id="app">
        <quill-editor  
        ref="quillEditor"
        class="editor"
        v-model="content"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @ready="onEditorReady($event)"
        />
    </div>
    <!-- Include the Quill library -->
    <script src="https://cdn.quilljs.com/1.3.4/quill.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- Quill JS Vue -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill-vuejs.js"></script>
    <!-- Include stylesheet -->
    <link href="https://cdn.quilljs.com/1.3.4/quill.core.css" rel="stylesheet">
    <link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
    <link href="https://cdn.quilljs.com/1.3.4/quill.bubble.css" rel="stylesheet">
    <script type="text/javascript">
        Vue.use(window.VueQuillEditor);
        var app = new Vue({
            el: '#app',
            data: {
                content: '<h2>I\'m quill vuejs example</h2>',
                editorOption: {
                    theme: 'snow'
                }
            },
            methods: {
                onEditorBlur(quill) {
                    console.log('editor blur!', quill)
                },
                onEditorFocus(quill) {
                    console.log('editor focus!', quill)
                },
                onEditorReady(quill) {
                    console.log('editor ready!', quill)
                }
            },
            computed: {
                editor() {
                    return this.$refs.quillEditor.quill
                }
            },
            mounted() {
               console.log('this is quill instance object', this.editor)
            }
        });
    </script>

Mount

Mount with global

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

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

Mount with local component

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

import { quillEditor } from 'quill-vuejs'

export default {
  components: {
    quillEditor
  }
}

Register Quill module

import Quill from 'quill'
import yourQuillModule from '../yourModulePath/yourQuillModule.js'
Quill.register('modules/yourQuillModule', yourQuillModule)

// Vue app...

Component

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

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

<script>
  // You can also register Quill modules in the component
  import Quill from 'quill'
  import someModule from '../yourModulePath/someQuillModule.js'
  Quill.register('modules/someModule', someModule)
  
  export default {
    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
      }
    },
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill
      }
    },
    mounted() {
      console.log('this is current quill instance object', this.editor)
    }
  }
</script>

Projects using quill-vuejs

Issues

• Add attributes from toolbar options
• Option to insert an image from a URL
• How quill-vuejs combine with the syntax highlighter module of highlight.js
• 配合 element-ui 实现上传图片/视频到七牛 demo
• How to fix “Can’t find variable: Quill”, “Quill is undefined”, “window.Quill is undefined” errors when trying to use Quill modules that use Webpack in Nuxt/SSR

Quill Modules

• quill-image-extend-module
• quill-image-resize-module
• quill-image-drop-module
• quilljs-table
• more modules...

Quill

Quill API document