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 ​

Events ​

None

Slots ​

None

CSS Variables ​

None

Standalone Installation ​

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

yarn install @morpheme/quill-editor

yarn install @morpheme/quill-editor

<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.