Skip to content

Quill Editor

VQuillEditor is a rich text editor that allows users to add formatting and content to text documents. It is based on the Quill.js library and is designed to be easy to use and customize.

Usage

To use the VQuillEditor component in your Vue.js application, you will need to have the @morpheme/ui package installed. The VQuillEditor component is registered globally when you install the package, so you don't need to import it manually.

Basic Usage

The most basic usage of the VQuillEditor component is to add it to a template and bind it to a value variable using the v-model directive. The value variable will contain the text entered into the editor.

Label

You can add a label to the VQuillEditor component by using the label prop. The label will be displayed above the editor and can be used to provide context or instruction for the user.

Validation

The VQuillEditor component can be used with the vee-validate library to perform form validation. To do this, you will need to define a validation schema using yup and pass it to the useForm hook from vee-validate. You can then use the handleSubmit function from the hook to handle form submissions.

Initial Values

You can set initial values for the form fields by passing an initialValues object to the useForm hook. The object should have keys that match the names of the form fields, and the values will be used as the default values for those fields.

Initial Errors

You can also set initial errors for the form fields by passing an initialErrors object to the useForm hook. The object should have keys that match the names of the form fields, and the values will be used as the default error messages for those fields.

Toolbar

The VQuillEditor component includes a toolbar that allows users to apply formatting to the text in the editor. By default, the toolbar includes the most commonly used formatting options, such as bold, italic, and underline.

You can customize the toolbar by using the toolbar prop. There are three built-in toolbar options: default, minimal, and full.

  • default: The default toolbar includes the most commonly used formatting options.
  • minimal: The minimal toolbar includes only the most essential formatting options.
  • full: The full toolbar includes all available formatting options.

Props

NameTypeDefault
modelValuestring | Delta''
valuestring | Delta''
namestringundefined
labelstringundefined
toolbar'essential' | 'minimal' | 'full' | ''essential
rulesstring | Record<string, any>undefined
contentType'html' | 'text' | 'delta''html'
enablebooleantrue
readOnlybooleanfalse
labelClassstring'block mb-2 font-medium'
errorClassstring'text-sm mt-1 text-error-500'
hintString''
hideErrorBooleanfalse

Events

None

Slots

None

CSS Variables

None

Standalone Installation

You can also install the QuillEditor component individually via @morpheme/quill-editor package:

bash
yarn install @morpheme/quill-editor
yarn install @morpheme/quill-editor
vue
<script setup lang="ts">
import VQuillEditor from '@morpheme/quill-editor';
</script>

<template>
  <VQuillEditor />
</template>
<script setup lang="ts">
import VQuillEditor from '@morpheme/quill-editor';
</script>

<template>
  <VQuillEditor />
</template>

Storybook

View Storybook documentation here.