@ispa.io/vquill NPM

A Vue component used for rich text editor with Quill JS. This project created and used for iSPA CMS, so if you used this package, please noted that we maynot check your issue or request.

Getting started

Install

npm i @ispa.io/vquill     // npm

Usage

import Vue from 'vue';
import vQuill from '@ispa.io/vquill'

Vue.component('vquill', vQuill);

Example

<vquill
  v-model="text"
  :toolbar="toolbar"
  placeholder="Place a text"
></vquill>

Props

Toolbar

This below is the default of toolbar, you can edit it by yourself for the best tool you need.

toolbar: [
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],
  [{ 'header': 1 }, { 'header': 2 }],
  [{ 'list': 'ordered' }, { 'list': 'bullet' }],
  [{ 'script': 'sub' }, { 'script': 'super' }],
  [{ 'indent': '-1' }, { 'indent': '+1' }],
  [{ 'direction': 'rtl' }],
  [{ 'size': ['small', false, 'large', 'huge'] }],
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
  [{ 'color': [] }, { 'background': [] }],
  [{ 'font': [] }],
  [{ 'align': [] }],
  ['clean'],
  ['link', 'image', 'video']
]

placeholder

Placeholder text

Type: String
Default: Type your text content...
theme
This is theme from Quill. Both of themes are included.
Type: String
Default: snow | bubble
height
Height of editor container. Only allow number type.
Type: Number
Default: 200