vue3-quill

Quill editor for vue3 project.

Content:

# Get started

npm i vue3-quill
# or
yarn add vue3-quill

1
2
3

Global Registration:

import { quillEditor, Quill } from 'vue3-quill'
import customQuillModule from 'customQuillModule'
Quill.register('modules/customQuillModule', customQuillModule)
app.use(quillEditor)

1
2
3
4

or Local Registration:

<script>
import { quillEditor, Quill } from 'vue3-quill'
import customQuillModule from 'customQuillModule'
Quill.register('modules/customQuillModule', customQuillModule)

export default {
  components: {
    quillEditor
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11

Example:

<template>
<component v-if="dynamicComponent" :is="dynamicComponent"></component>
  <quill-editor
    v-model:value="state.content"
    :options="state.editorOption"
    :disabled="state.disabled"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @ready="onEditorReady($event)"
    @change="onEditorChange($event)"
  />
</template>

<script>
import { reactive } from 'vue'
import { quillEditor } from 'vue3-quill'

export default {
  name: 'App',
  components: {
    quillEditor
  },
  setup() {
    const state = reactive({
      dynamicComponent: null,
      content: '<p>2333</p>',
      _content: '',
      editorOption: {
        placeholder: 'core',
        modules: {
          toolbar: [
            // custom toolbars options
            // will override the default configuration
          ],
          // other moudle options here
        }
        // more options
      },
      disabled: false
    })

    const onEditorBlur = quill => {
      console.log('editor blur!', quill)
    }
    const onEditorFocus = quill => {
      console.log('editor focus!', quill)
    }
    const onEditorReady = quill => {
      console.log('editor ready!', quill)
    }
    const onEditorChange = ({ quill, html, text }) => {
      console.log('editor change!', quill, html, text)
      state._content = html
    }

    setTimeout(() => {
      state.disabled = true
    }, 2000)

    return { state, onEditorBlur, onEditorFocus, onEditorReady, onEditorChange }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

# Options

# Form Input Bindings: v-model

The v-model directive can be used to create a two-way data binding. For example:

<quill-editor v-model:value="state.content"></quill-editor>

# Event binding

<quill-editor
    v-model:value="state.content"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @ready="onEditorReady($event)"
    @change="onEditorChange($event)"
  />

1
2
3
4
5
6
7

The following events are available:

blur
focus
ready
change

# options prop

options
Apply the default options by not passing this prop.
The options passed in will override the default preset options.
For example:
```
modules: {
  toolbar: []
}
```
1
2
3
this option will generate an empty toolbar.
Check the offical doc Quill Documentationopen in new window for all options.
disabled
Default: false
Set true to disabled the editor.

# Default Quill options

modules: {
  toolbar: [
    ['bold', 'italic', 'underline', 'strike'],
    ['blockquote', 'code-block'],
    [{ header: 1 }, { header: 2 }],
    [{ list: 'ordered' }, { list: 'bullet' }],
    [{ script: 'sub' }, { script: 'super' }],
    [{ indent: '-1' }, { indent: '+1' }],
    [{ direction: 'rtl' }],
    [{ size: ['small', false, 'large', 'huge'] }],
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    [{ color: [] }, { background: [] }],
    [{ font: [] }],
    [{ align: [] }],
    ['clean'],
    ['link', 'image', 'video']
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# Packages

Borrowing from: vue-quill-editoropen in new window Inspired by this one

Quill ImageHandler Moduleopen in new window
...