README.md

vue-quill-editor

       

Quill editor component for Vue(2).

---

DEPRECATED ⚠️

Unfortunately, since the Quill project has effectively stopped being maintained, vue-quill-editor will be DEPRECATED and will no longer support Vue3; if you're looking for a rich text editor, I recommend migrating to tiptap, which is a much better alternative.

I encourage folks to fork this repository and, if a fork gets popular, I will link to it in this README. (If Quill is updated again someday, this project will probably continue to be updated as well.

The stalled Quill project can be found in these issues:

• Is quill dead?
• Project still active?
• Switching editor lib as QuillJS is dead
• What's the status of this project? It's been over 2 years since 1.3.7 release.

---

Example

• Component examples
• CDN examples

Documentation

• Quill Guides
• Quill APIs
• Quill Documentation

Install

NPM

npm install vue-quill-editor --save

yarn add vue-quill-editor

CDN

<link rel="stylesheet" href="path/to/quill.core.css"/>
<link rel="stylesheet" href="path/to/quill.snow.css"/>
<link rel="stylesheet" href="path/to/quill.bubble.css"/>
<script type="text/javascript" src="path/to/quill.js"></script>
<script type="text/javascript" src="path/to/vue.min.js"></script>
<script type="text/javascript" src="path/to/dist/vue-quill-editor.js"></script>
<script type="text/javascript">
  Vue.use(window.VueQuillEditor)
</script>

Usage

Global component

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

Local component

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
  }
}

SSR component

See Nuxt.js example code.

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 vue-quill-editor

• Tamiat CMS
• ...

Issues

• Add attributes from toolbar options
• Option to insert an image from a URL
• How vue-quill-editor 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...

Changelog

Detailed changes for each release are documented in the release notes.

License

Licensed under the MIT License.