vue-quill-up v0.0.6

Quill2 in Vue3

npm install vue-quill-up

Here is a demo that you can edit

Usage

Base

You can use v-model to bind quill content. and use content-type specify the type of model-value. Although QuillUp still uses Delta internally.

<script lang="ts" setup>
import QuillUp from 'vue-quill-up';
import { ref } from 'vue';

const content = ref('<h1>Hello World!</h1>');
const editorRef = ref();
const contentType = 'html';
const options = {
  theme: 'snow',
};
</script>

<template>
  <QuillUp
    ref="editorRef"
    v-model="content"
    :options="options"
    :read-only="false"
    :content-type="contentType"
  />
</template>

Register Prop

You can use the register prop to register custom modules.

<script setup>
import QuillUp from 'vue-quill-up';
import { ref } from 'vue';
import { Parchment } from 'quill/core';

const MarginTopClass = new Parchment.ClassAttributor('margin-top', 'ql-margin-top', {
  scope: Parchment.Scope.BLOCK,
});
const MarginTopStyle = new Parchment.StyleAttributor('margin-top', 'margin-top', {
  scope: Parchment.Scope.BLOCK,
});

const content = ref('<h1>Hello World!</h1>');
const editorRef = ref();
const contentType = 'html';
const options = {
  theme: 'snow',
};
// same Quill.register({ 'attributors/class/margin-top': MarginTopClass, 'attributors/style/margin-top': MarginTopStyle })
const register = {
  attributors: {
    class: {
      'margin-top': {
        module: MarginTopClass,
        overwrite: true,
      },
    },
    style: {
      'margin-top': MarginTopStyle,
    }
  },
};
</script>

<template>
  <QuillUp
    ref="editorRef"
    v-model="content"
    :options="options"
    :readonly="false"
    :content-type="contentType"
    :register="register"
  />
</template>

For toolbar module

You can pass a ref<HTMLElement> to the toolbar module to customize the toolbar.

<script setup>
import { ref } from 'vue';

const content = ref('');
const toolbarRef = ref();
const options = {
  theme: 'snow',
  modules: {
    toolbar: toolbarRef,
    // or like below
    // toolbar: {
    //   container: toolbarRef,
    // },
    TextCounter: {
      maxLength: 10,
      exceed: () => {
        console.log('out of range');
      },
    },
  },
};
</script>

<template>
  <div ref="toolbarRef">
    <select class="ql-size">
      <option value="small" />
      <option selected />
      <option value="large" />
      <option value="huge" />
    </select>
    <button class="ql-bold" />
  </div>
  <QuillUp
    v-model="content"
    :options="options"
    :readonly="false"
    content-type="string"
  />
</template>

Props

Events