Fork of @vueup/vuequill using Quill@rc

Installation

npm install @ohgeorgie/vuequill@latest --save

Usage

in main.js

1import { createApp } from "vue";
2import App from "./App.vue";
3import "quill/dist/quill.snow.css";
4import { Quill, Editor } from "@ohgeorgie/vuequill";
5
6const globalOptions = {
7   debug: "warn",
8   modules: {},
9   placeholder: "Something to add...",
10   theme: "snow",
11};
12
13Editor.props.globalOptions.default = () => globalOptions;
14
15createApp(App).component("Editor", Editor).mount('#app');
16

Option 1

Use it in a vue component file

1<script setup>
2   import { ref } from "vue"
3   const body = ref(null)
4</script>
5<template>
6   <Editor ref="editor" v-model:content="body"
7   toolbar="essential">
8   </Editor>
9</template>

Option 2

Or create an Editor component if you want to add extra options

QuillEditor.vue:

1<script setup>
2import { ref, toRef } from "vue";
3const props = defineProps({
4  toolbar: {
5    type: String,
6    required: false,
7    validator: (value) => {
8      return ["essential", "minimal", "full"].indexOf(value);
9    },
10  },
11});
12const body = defineModel();
13const editorBody = toRef(body);
14
15const ready = () => {
16   console.log(editor);
17   console.log(editor.value.getEditor());
18}
19
20</script>
21
22<template>
23   <Editor
24      ref="editor"
25      v-model:content="body"
26      contentType="html"
27      toolbar="#toolbar"
28      @ready="ready"
29    >
30      <template #toolbar>
31        <div id="toolbar">
32          <button class="ql-bold"></button>
33          <button class="ql-italic"></button>
34          <button class="ql-underline"></button>
35          <button class="ql-list" value="bullet"></button>
36          <button class="ql-list" value="ordered"></button>
37          <button class="ql-indent" value="+1"></button>
38          <button class="ql-indent" value="-1"></button>
39
40          <select class="ql-color"></select>
41          <select class="ql-background"></select>
42
43          <select class="ql-size">
44            <option value="small"></option>
45            <option selected></option>
46            <option value="large"></option>
47            <option value="huge"></option>
48          </select>
49
50          <button class="ql-clean"><button>
51          <button class="ql-image"><button>
52          <button class="ql-video"><button>
53          <button class="ql-link"></button>
54
55          
56        </div>
57      </template>
58    </Editor>
59</template>

And add it to other components

1<script setup>
2   import QuillEditor from "./QuillEditor.vue"
3
4   const body = ref(null)
5</script>
6
7<template>
8   <div class="container">
9      <QuillEditor v-model="body" />
10   </div>
11</template>

Example

In the /example folder is an example of both options.

1npm install
2npm run demo:dev

The QuillEditor.vue has an emoji panel component added to the toolbar showing how to communicate between vue and quill. insertText() and insertEmbed() functions were added to the original vuequill package to allow this.