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.

If Quill ever updates v2.0, this project will probably continue to be updated as well. I encourage folks to fork this repository and, if a fork gets popular, I will link to it in this README.

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

1npm install vue-quill-editor --save

1yarn add vue-quill-editor

CDN

1<link rel="stylesheet" href="path/to/quill.core.css"/>
2<link rel="stylesheet" href="path/to/quill.snow.css"/>
3<link rel="stylesheet" href="path/to/quill.bubble.css"/>
4<script type="text/javascript" src="path/to/quill.js"></script>
5<script type="text/javascript" src="path/to/vue.min.js"></script>
6<script type="text/javascript" src="path/to/dist/vue-quill-editor.js"></script>
7<script type="text/javascript">
8  Vue.use(window.VueQuillEditor)
9</script>

Usage

Global component

1import Vue from 'vue'
2import VueQuillEditor from 'vue-quill-editor'
3
4import 'quill/dist/quill.core.css' // import styles
5import 'quill/dist/quill.snow.css' // for snow theme
6import 'quill/dist/quill.bubble.css' // for bubble theme
7
8Vue.use(VueQuillEditor, /* { default global options } */)

Local component

1import 'quill/dist/quill.core.css'
2import 'quill/dist/quill.snow.css'
3import 'quill/dist/quill.bubble.css'
4
5import { quillEditor } from 'vue-quill-editor'
6
7export default {
8  components: {
9    quillEditor
10  }
11}

SSR component

See Nuxt.js example code.

Register Quill module

1import Quill from 'quill'
2import yourQuillModule from '../yourModulePath/yourQuillModule.js'
3Quill.register('modules/yourQuillModule', yourQuillModule)
4
5// Vue app...

Component

1<template>
2  <!-- Two-way Data-Binding -->
3  <quill-editor
4    ref="myQuillEditor"
5    v-model="content"
6    :options="editorOption"
7    @blur="onEditorBlur($event)"
8    @focus="onEditorFocus($event)"
9    @ready="onEditorReady($event)"
10  />
11
12  <!-- Or manually control the data synchronization -->
13  <quill-editor
14    :content="content"
15    :options="editorOption"
16    @change="onEditorChange($event)"
17  />
18</template>
19
20<script>
21  // You can also register Quill modules in the component
22  import Quill from 'quill'
23  import someModule from '../yourModulePath/someQuillModule.js'
24  Quill.register('modules/someModule', someModule)
25  
26  export default {
27    data () {
28      return {
29        content: '<h2>I am Example</h2>',
30        editorOption: {
31          // Some Quill options...
32        }
33      }
34    },
35    methods: {
36      onEditorBlur(quill) {
37        console.log('editor blur!', quill)
38      },
39      onEditorFocus(quill) {
40        console.log('editor focus!', quill)
41      },
42      onEditorReady(quill) {
43        console.log('editor ready!', quill)
44      },
45      onEditorChange({ quill, html, text }) {
46        console.log('editor change!', quill, html, text)
47        this.content = html
48      }
49    },
50    computed: {
51      editor() {
52        return this.$refs.myQuillEditor.quill
53      }
54    },
55    mounted() {
56      console.log('this is current quill instance object', this.editor)
57    }
58  }
59</script>

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.