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.

Table of contents

• Getting started
• Props
• Milestone
• Versioning
• License

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

Milestone

Versioning

Maintained under the Semantic Versioning guidelines.

License

MIT © Malayvuong

Quill Modules

• quill-image-extend-module
• quill-image-resize-module
• quill-image-drop-module
• quilljs-table
• more modules...

Quill

Quill API document

Invite me a cup of coffee

If you like this project and want to contribute us, then you can send us a cup of coffee by this ways below:

| PAYPAL.ME | MOMO App (Vietnam) | |:--------------------:|:------------------:| | | |

⬆ back to top