Quill Editor for Vue 3

Install & Download:

# Yarn
$ yarn add @vueup/vue-quill@alpha
# NPM
$ npm i @vueup/vue-quill@alpha

Description:

Just another Quill editor component created for Vue.js 3 applications.

Easy to use and written entirely in TypeScript.

See Also:

• Quill Editor Component For Vue2

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