Just another Quill editor component created for Vue.js 3 applications.
Easy to use and written entirely in TypeScript.
See Also:
How to use it:
1. Import and register the Quill editor component.
// register globally import { createApp } from 'vue' import { QuillEditor } from '@vueup/vue-quill' import '@vueup/vue-quill/dist/vue-quill.snow.css'; import '@vueup/vue-quill/dist/vue-quill.bubble.css'; const app = createApp() app.component('QuillEditor', QuillEditor) // register locally import { QuillEditor } from '@vueup/vue-quill' import '@vueup/vue-quill/dist/vue-quill.snow.css'; import '@vueup/vue-quill/dist/vue-quill.bubble.css'; export default { components: { QuillEditor } }
2. Add the Quill Editor to the app and specify the theme you want to use.
<QuillEditor theme="snow" />
3. Customize the toolbar.
<QuillEditor toolbar="minimal" .../>
essential: [ [{ 'header': [1, 2, 3, 4, 5, 6, false] }], ['bold', 'italic', 'underline'], [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'align': [] }], ['blockquote', 'code-block', 'link'], [{ 'color': [] }, 'clean'], ], minimal: [ [{ 'header': 1 }, { 'header': 2 }], ['bold', 'italic', 'underline'], [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'align': [] }], ], full: [ ['bold', 'italic', 'underline', 'strike'], // toggled buttons ['blockquote', 'code-block'], [{ 'header': 1 }, { 'header': 2 }], // custom button values [{ 'list': 'ordered' }, { 'list': 'bullet' }], [{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript [{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent [{ 'direction': 'rtl' }], // text direction [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown [{ 'header': [1, 2, 3, 4, 5, 6, false] }], [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme [{ 'font': [] }], [{ 'align': [] }], ['link', 'video', 'image'], ['clean'] // remove formatting button ]
4. Available component props.
content: { type: [String, Object] as PropType<String | Delta>, default: {}, }, enable: { type: Boolean, default: true, }, readOnly: { type: Boolean, default: false }, placeholder: { type: String, required: false }, theme: { type: String, default: "snow", validator: (value: string) => { return ["snow", "bubble", ""].includes(value) } }, toolbar: { type: [String, Array, Object], required: false, validator: (value: string | object) => { if (typeof value === "string" && value !== "") { return value.charAt(0) === "#" ? true : Object.keys(toolbarOptions).indexOf(value) !== -1; } return true; }, }, options: { type: Object as PropType<QuillOptionsStatic>, required: false, }, globalOptions: { type: Object as PropType<QuillOptionsStatic>, required: false, },
5. Events.
- @textChange(delta: Delta, oldContents: Delta, source: Sources): Triggered when the text changes.
- @selectionChange(range: RangeStatic, oldRange: RangeStatic, source: Sources): Triggered when the selections changes.
- @editorChange(name: ‘text-change’, delta: Delta, oldContents: Delta, source: Sources): Triggered when the editor changes, either text-change or selection-change.
- @update:content(content: Delta): Triggered when the editor content changes.
- @focus(editor: Ref): Triggered when the editor loses focus.
- @blur(editor: Ref): Triggered when the editor gains focus.
- @ready(quill: Quill): Triggered after Quill initialization.
6. API methods:
getEditor() getToolbar() getQuill() getHTML() setHTML(html)
Preview:
Changelog:
v1.2.0 (05/13/2023)
- vue-quill: add focus method
Download Details:
Author: vueup
Live Demo: https://vueup.github.io/vue-quill/#demo
Download Link: https://github.com/vueup/vue-quill/archive/refs/heads/master.zip
Official Website: https://github.com/vueup/vue-quill
Install & Download:
# Yarn
$ yarn add @vueup/vue-quill@alpha
# NPM
$ npm i @vueup/vue-quill@alpha