vue3-quill

Quill editor for vue3

Homepage

vue3-quill-editor-vite github-page

Usage

1npm i vue3-quill-editor-vite
2yarn add vue3-quill-editor-vite

Global Registration:

1// global
2import { QuillEditor, Quill } from 'vue3-quill-editor-vite'
3import 'vue3-quill-editor-vite/dist/style.css'
4app.use(QuillEditor)
5

or Local Registration:

1//single file
2import { QuillEditor, Quill } from 'vue3-quill-editor-vite'
3import 'vue3-quill-editor-vite/dist/style.css'
4
5export default {
6  components: {
7    [QuillEditor.name]: QuillEditor
8  }
9}
10

In .vue

1<template>
2  <quill-editor
3    v-model:value="state.content"
4    :options="state.editorOption"
5    :disabled="state.disabled"
6    @blur="onEditorBlur($event)"
7    @focus="onEditorFocus($event)"
8    @ready="onEditorReady($event)"
9    @change="onEditorChange($event)"
10  />
11</template>
12
13<script>
14import { reactive } from 'vue'
15
16export default {
17  name: 'App',
18  setup() {
19    const state = reactive({
20      content: '<p>2333</p>',
21      _content: '',
22      editorOption: {
23        placeholder: 'core',
24        modules: {
25          // toolbars: [
26            // custom toolbars options
27            // will override the default configuration
28          // ],
29          // other moudle options here
30          // otherMoudle: {}
31        },
32        // more options
33      },
34      disabled: false
35    })
36
37    const onEditorBlur = (quill) => {
38      console.log('editor blur!', quill)
39    }
40    const onEditorFocus = (quill) => {
41      console.log('editor focus!', quill)
42    }
43    const onEditorReady = (quill) => {
44      console.log('editor ready!', quill)
45    }
46    const onEditorChange = ({ quill, html, text }) => {
47      console.log('editor change!', quill, html, text)
48      state._content = html
49    }
50
51    setTimeout(() => {
52      state.disabled = true
53    }, 2000)
54
55    return { state, onEditorBlur, onEditorFocus, onEditorReady, onEditorChange }
56  }
57}
58</script>

Options

Form Input Bindings: v-model

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

1<quill-editor v-model:value="state.content"></quill-editor>
2
3// tsx
4<QuillEditor v-model:value={state.content} />

Event binding

1<quill-editor
2    v-model:value="state.content"
3    @blur="onEditorBlur($event)"
4    @focus="onEditorFocus($event)"
5    @ready="onEditorReady($event)"
6    @change="onEditorChange($event)"
7  />
8
9// tsx
10<QuillEditor
11    v-model:value={state.content}
12    @blur={onEditorBlur}
13    @focus={onEditorFocus}
14    @ready={onEditorReady}
15    @change={onEditorChange}
16  />

readOnly

1const options = {readOnly: true}
2
3<quill-editor
4    v-model:value="state.content"
5    :options="options"
6  />
7
8// tsx
9<QuillEditor
10    v-model:value={state.content}
11    options={options}
12  />

image upload

1const state = reactive({
2	value: '',
3	content: '',
4	insertImage: ''
5})
6const quillImage = ref(null)
7const options = {readOnly: true}
8
9// Select file event
10const selectFile = () => {
11	if (quillImage.value) {
12		const inputFile = quillImage.value as HTMLInputElement
13		inputFile.click()
14	}
15}
16
17const uploadImage = function (res: Event) {
18	const inputFile = res.target as HTMLInputElement
19	if (inputFile.files && inputFile.files.length) {
20		// Picture upload logic
21		doUpload(inputFile.files[0]).then((value: string) => {
22			console.log(value)
23			state.insertImage = value
24		})
25	}
26}
27
28<quill-editor
29	height={'100%'}
30	v-model={state.value}
31	content={state.content}
32	imageCallback={selectFile}
33	insertImage={state.insertImage}
34>
35	<template #uploadButton>
36		<input ref="quillImage" type="file" onChange="uploadImage" accept="image/*" />
37	</template>
38</quill-editor>
39
40// tsx
41<QuillEditor
42		height={'100%'}
43		v-model={state.value}
44		content={state.content}
45		imageCallback={selectImage}
46		insertImage={state.insertImage}
47		v-slots={{
48			'uploadButton': () => <input ref={quillImage} type="file" onChange={uploadImage} accept="image/*" />
49		}}
50	/>

The following events and arguments are available:

• blur argu: quill
• focus argu: quill
• ready argu: quill
• change argu: html, text, quill

Options prop

• options
  Apply the default options by not passing this prop.
  The options passed in will override the default preset options.
  For example:

  1modules: {
  2  toolbar: []
  3}

  this option will generate an empty toolbar.
  Check the offical doc Quill Documentation for all options.
• disabled
  Default: false
  Set true to disabled the editor. As the value of readOnly when initialized. Value changing will call API Quill Documentation of quill after initialization.

Default Quill options

1modules: {
2  toolbar: [
3    ['bold', 'italic', 'underline', 'strike'],
4    ['blockquote', 'code-block'],
5    [{ header: 1 }, { header: 2 }],
6    [{ list: 'ordered' }, { list: 'bullet' }],
7    [{ script: 'sub' }, { script: 'super' }],
8    [{ indent: '-1' }, { indent: '+1' }],
9    [{ direction: 'rtl' }],
10    [{ size: ['small', false, 'large', 'huge'] }],
11    [{ header: [1, 2, 3, 4, 5, 6, false] }],
12    [{ color: [] }, { background: [] }],
13    [{ font: [] }],
14    [{ align: [] }],
15    ['clean'],
16    ['link', 'image', 'video']
17  ]
18}

Packages

Borrowing from: vue-quill-editor Inspired by this one

Development

1# root dir
2yarn serve

Welcome PR

Thanks to the open source. :heart: