Quill Rich Text Editor component for Vue.js

Quill Rich Text Editor component for Vue.js

Quill Rich Text Editor component is an open source WYSIWYG editor built for the modern web and Bubble menu like Medium Editor, Tumblr Editor

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);
            },


        },

    }

Quill Rich Text Editor component for Vue.js Bubble

Config theme: snow

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

Quill Rich Text Editor component for Vue.js

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


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

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

vue-quill-editor Rich Text Editor Experience

There are many rich text editors on the market. I personally still recommend Vue's own vue-quill-deitor. Although it only supports IE10 +, I will provide you with the experience of using this text editor.

5 Best WYSIWYG Rich Text Editors For Vue.js

5 Best WYSIWYG Rich Text Editors For Vue.js.Here is a list of 5 best, top-rated WYSIWYG rich text editors from which you can choose in the next web & mobile app. Enjoy.

Collection of 15 Vue Editor Component for Your Vue App

Vue editor component can become an unparalleled ally when it comes to code completion and visual assistance for debugging and building a Vue app.

MYCURE | Vue Wysiwyg Editor

MYCURE | Vue Wysiwyg Editor

10 Optional Vue Text Component for Vue.js App

Vue text component is a self-contained editor with which you can write anything you want on your project page.