Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 148 Commits
config		config
dist		dist
src		src
test		test
.babelrc		.babelrc
.eslintignore		.eslintignore
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.npmignore		.npmignore
.travis.yml		.travis.yml
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
bower.json		bower.json
package.json		package.json

Repository files navigation

vue-quill-editor

Quill editor component forVue(2).

DEPRECATED‼️

Unfortunately, since theQuill project has effectively stopped being maintained,vue-quill-editor will beDEPRECATED and will no longer support Vue3; if you're looking for a rich text editor, I recommend migrating totiptap, 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:

Example

Documentation

Install

NPM

npm install vue-quill-editor --save

yarn add vue-quill-editor

CDN

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

Usage

Global component

importVuefrom'vue'importVueQuillEditorfrom'vue-quill-editor'import'quill/dist/quill.core.css'// import stylesimport'quill/dist/quill.snow.css'// for snow themeimport'quill/dist/quill.bubble.css'// for bubble themeVue.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'exportdefault{components:{    quillEditor}}

SSR component

SeeNuxt.js example code.

Register Quill module

importQuillfrom'quill'importyourQuillModulefrom'../yourModulePath/yourQuillModule.js'Quill.register('modules/yourQuillModule',yourQuillModule)// Vue app...

Component

<template><!-- Two-way Data-Binding-->  <quill-editorref="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 componentimportQuillfrom'quill'importsomeModulefrom'../yourModulePath/someQuillModule.js'Quill.register('modules/someModule', someModule)exportdefault {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() {returnthis.$refs.myQuillEditor.quill      }    },mounted() {console.log('this is current quill instance object',this.editor)    }  }</script>