# vue3-quill

Quill editor for vue3 project.

Content:

<p>2333</p>

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

1

## # 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 Documentation
  open 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-editor
open in new window Inspired by this one

Quill ImageHandler Module
open in new window
...

MIT Licensed | Copyright © 2021-present flyween