Quill editor component for Vue.
基于 Quill、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用。
NPM
npm install quill-vuejs --save # or yarn add quill-vuejsCDN
<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/quill-vuejs@0.0.4/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 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 } }import Quill from 'quill' import yourQuillModule from '../yourModulePath/yourQuillModule.js' Quill.register('modules/yourQuillModule', yourQuillModule) // Vue app...<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>- 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