Vue-Quill-Editor

🍡Quill editor component for Vue, support SPA and SSR.

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

Example

Demo Page

CDN Example

Nuxt.js/SSR example code

Projects Using Vue-Quill-Editor

Tamiat CMS

Install

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>

NPM

1npm install vue-quill-editor --save

Mount

mount with global

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

mount with component

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

mount with ssr

1// if used in nuxt.js/ssr, you should keep require it only in browser build environment
2if (process.browser) {
3  const VueQuillEditor = require('vue-quill-editor/dist/ssr')
4  Vue.use(VueQuillEditor, /* { default global options } */)
5}

register quill module

1// register quill modules, you need to introduce and register before the vue program is instantiated
2import Quill from 'quill'
3import yourQuillModule from '../yourModulePath/yourQuillModule.js'
4Quill.register('modules/yourQuillModule', yourQuillModule)

Difference（使用方法的区别）

SSR and the only difference in the use of the SPA:

• SPA worked by the component, find quill instance by ref attribute.
• SSR worked by the directive, find quill instance by directive arg.
• Other configurations, events are the same.

SSR

1<!-- You can custom the "myQuillEditor" name used to find the quill instance in current component -->
2<template>
3  <!-- bidirectional data binding（双向数据绑定） -->
4  <div class="quill-editor" 
5       v-model="content"
6       v-quill:myQuillEditor="editorOption">
7  </div>
8
9  <!-- Or manually control the data synchronization（手动控制数据流）  -->
10  <div class="quill-editor" 
11       :content="content"
12       @change="onEditorChange($event)"
13       v-quill:myQuillEditor="editorOption">
14  </div>
15</template>
16
17<script>
18  export default {
19    data() {
20      return {
21        content: '<p>example content</p>',
22        editorOption: { /* quill options */ }
23      }
24    },
25    mounted() {
26      console.log('this is current quill instance object', this.myQuillEditor)
27    },
28    methods: {
29      onEditorChange(event) {
30        console.log('onEditorChange')
31      }
32    },
33    // Omit the same parts as in the following component sample code
34    // ...
35  }
36</script>

SPA

1<template>
2  <!-- bidirectional data binding（双向数据绑定） -->
3  <quill-editor v-model="content"
4                ref="myQuillEditor"
5                :options="editorOption"
6                @blur="onEditorBlur($event)"
7                @focus="onEditorFocus($event)"
8                @ready="onEditorReady($event)">
9  </quill-editor>
10
11  <!-- Or manually control the data synchronization（或手动控制数据流） -->
12  <quill-editor :content="content"
13                :options="editorOption"
14                @change="onEditorChange($event)">
15  </quill-editor>
16</template>
17
18<script>
19
20  // you can also register quill modules in the component
21  import Quill from 'quill'
22  import { someModule } from '../yourModulePath/someQuillModule.js'
23  Quill.register('modules/someModule', someModule)
24  
25  export default {
26    data () {
27      return {
28        content: '<h2>I am Example</h2>',
29        editorOption: {
30          // some quill options
31        }
32      }
33    },
34    // manually control the data synchronization
35    // 如果需要手动控制数据同步，父组件需要显式地处理changed事件
36    methods: {
37      onEditorBlur(quill) {
38        console.log('editor blur!', quill)
39      },
40      onEditorFocus(quill) {
41        console.log('editor focus!', quill)
42      },
43      onEditorReady(quill) {
44        console.log('editor ready!', quill)
45      },
46      onEditorChange({ quill, html, text }) {
47        console.log('editor change!', quill, html, text)
48        this.content = html
49      }
50    },
51    computed: {
52      editor() {
53        return this.$refs.myQuillEditor.quill
54      }
55    },
56    mounted() {
57      console.log('this is current quill instance object', this.editor)
58    }
59  }
60</script>

Modules

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

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 documents

Api docs

Author

Surmon