Vue Quill Rich Text Editor Component for Vuejs

quill-npm-rich-text-editor

VueQuill is a rich text editor-building component, powered by Vue 3 and Quill.

  • 💚 Integrated with Vue 3: A more powerful and performance framework than ever before.
  • 🧙‍♂️ Full typesetting: The VueQuill source code is written entirely in TypeScript.
  • 🛠️ Easy to use Direct implementation through a simple API.

wysiwyg text editor using quilljs, rich text editor bootstrap, quill text editor vue, rich text editor online, quill editor example, how to use quill rich text editor

How to make use of it:

Install and download:

# Yarn
$ yarn add @vueup/[email protected]

# NPM
$ npm i @vueup/[email protected]

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 Quill Editor to the app and select 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. Component props available.

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.

getEditor()
getToolbar()
getQuill()
getHTML()
setHTML(html)

Quill Editor, VueQuill Rich Text Editor Plugin/Github


See Demo And Download

Official Website(vueup): Click Here

This superior jQuery/javascript plugin is developed by vueup. For extra Advanced Usage, please go to the official website.

Share