Using VueQuill editor in Vue.Js3

It is important to note that at the time this article is written, the Vue-quill editor is in the beta phase meaning it is still in its pre-release, testing phase hence is not entirely stable and some features can change.

Introduction

Quill editor is an API-driven text editor designed to enable users to write texts, incorporating a few modern ideas and beautiful formatting.
Some reasons why one would consider Quill editor as a good choice are because;

It provides custom content and formatting- Quill introduced its own document model, which is a powerful abstraction of the DOM and supports scalability and customization. There are no restrictions on the formats and content that Quill can support. Users have already used it to add embedded slideshows, interactive lists, and 3D. Role model.

It provides cross-platform usage- Quill is not only concerned that it works but also that it works the same way across all browsers. meaning the same action will produce the same effect across all browsers, both mobile and web.

It is super easy to use.

VueQuill

is a Vue component used to create a text editor powered by Vue 3 and Quill. This package is a thin Quill wrapper that can be easily used in Vue 3 applications

Installation

Vuequill can be installed easily through npm or yarn

npm install @vueup/vue-quill@beta --save

yarn add @vueup/vue-quill@beta

Importing package

Vuequill can be registered locally(in a specific file)or globally(in your main.js file).

Locally:

<script>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

export default {
  components:{
    QuillEditor
  }
}

</script>

Globally:

import { createApp } from 'vue'
import App from './App.vue'

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

const app = createApp(App)

app.component('QuillEditor', QuillEditor) 

app.mount('#app')

It is important to note that the component itself does not include any CSS theme. The package comes with two themes; Snow and Bubble.
You’ll need to include it separately as seen in the snippet above i.e

import '@vueup/vue-quill/dist/vue-quill.snow.css'
 or
import '@vueup/vue-quill/dist/vue-quill.bubble.css'

Usage

Inside the file where the text editor is needed, add the following code

<QuillEditor theme="snow"/>

When you run your project, you should see something like this;

Note: The height and width of the editor can be adjusted by using CSS

Binding the VueQuill editor content

It is common to want to have the content of the Vuequill text editor bound to a data property in your app to carry out further actions with it. Unlike the regular method used to bind data properties in Vue, Vuequill requires an extra step, the :content.

v-model:content="dataProperty"

VueQuill editor listening for events

Actions can be carried out with the Vuequill editor and listening for events can trigger these actions. Events like @blur, @focus, @change, and @ready. You can then write a method to carry out your desired action parsing the event as an argument.

  <QuillEditor theme="snow"
      @blur="onEditorBlur($event)" 
      @focus="onEditorFocus($event)" 
      @change="onEditorChange($event)" 
      @ready="onEditorReady($event)"
      />

For example, I want to assign a default value to the Vuequill editor. I will use the @ready event
The method call will look like this:

onEditorReady (e) {
    console.log(e);
    e.container.querySelector('.ql-blank').innerHTML = this.form.content
},

This article covers the basic usage of Vuequill editor. I hope you found it useful!