Quill Editor Component

VueQuill integrated with vee-validate.

Installation

Install with your prefered Package Manager.

npm

npm i @morpheme/quill-editor

yarn

yarn add @morpheme/quill-editor

pnpm

pnpm i @morpheme/quill-editor

Usage

Basic Usage

<script setup lang="ts">
  import {VQuillEditor} from '@morpheme/quill-editor';
  import '@morpheme/quill-editor/dist/style.css';

  const content = ref('');
</script>

<template>
  <VQuillEditor
    v-model="content"
    name="content"
    label="Content"
    placeholder="Input your content"
  />
  <pre>{{ {content} }}</pre>
</template>

Validation Example

<script setup lang="ts">
  import {VQuillEditor} from '@morpheme/quill-editor';
  import {useForm} from 'vee-validate';
  import {object, string} from 'yup';
  import VBtn from '@morpheme/button';
  import '@morpheme/quill-editor/dist/style.css';

  const schema = object({
    content: string().required().label('Content'),
  });

  const {handleSubmit, resetForm, values} = useForm({
    validationSchema: schema,
  });

  const onSubmit = handleSubmit((values) => {
    alert(JSON.stringify(values));
  });
</script>

<template>
  <form @submit="onSubmit" class="border-none">
    <VQuillEditor
      name="content"
      label="Content"
      placeholder="Input your content"
    />
    <div class="mt-4">
      <v-btn type="submit">Submit</v-btn>
      <v-btn type="button" text @click="resetForm">Reset</v-btn>
    </div>
    <pre>{{ { values } }}</pre>
  </form>
</template>

Documentation

View full documentation here.

License

MIT