Quill Rich Text Editor component for Vue.js

Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.

In addition to the usual toolbox, this Editor allows configuration of the Bubble menu just like Medium Editor or Tumblr Editor.

Demo: https://lab.morioh.com/v-quill-editor/

How to use Quill

npm i @morioh/v-quill-editor

yarn add @morioh/v-quill-editor

Register

import '@morioh/v-quill-editor/dist/editor.css';

import Vue from 'vue'
import Editor from '@morioh/v-quill-editor'

// global register
Vue.use(Editor);

Or use CDN

<link href="https://cdn.jsdelivr.net/npm/@morioh/v-quill-editor/dist/editor.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/@morioh/v-quill-editor/dist/editor.min.js" type="text/javascript"></script>

<link href="https://unpkg.com/@morioh/v-quill-editor/dist/editor.css" rel="stylesheet">

<script src="https://unpkg.com/@morioh/v-quill-editor/dist/editor.min.js" type="text/javascript"></script>

Default theme is ‘bubble’

<editor v-model="value" @change="onChange" paste-as-text="true"></editor>

export default {
        data() {
            return {
                value: '',
                
                }
            }
        },

        methods: {
            val() {
                this.value = "This's new value";
            },

            onChange(html, text) {
                console.log(html.length, text.length);
            },


        },

    }

Config theme: snow

 <editor v-model="value" theme="snow"></editor>

Full config by options:

<editor v-model="value" theme="snow" :options="options"></editor>

	export default {
        data() {
            return {
                value: '',
                options: {
                    modules: {

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

        methods: {
            val() {
                this.value = "This's new value";
            },

            onChange(html, text) {
                console.log(html.length, text.length);
            },


        },

    }

More custom read more Quill API document

---

Demo: https://lab.morioh.com/v-quill-editor/

Source Code: https://github.com/Morioh-Lab/v-quill-editor

---

Recommended

☞ Markdown Editor component for Vue.js

☞ Simple notify handler component for Vue.js

☞ Lightbox Photo Grid and Slideshow component for Vue.JS

☞ Video Embed Component for Vue.JS

#wysiwyg #rich text editor #quill #vue #vuejs