Vue 3 Quill编辑器 - vue3-quill

Vue 3 Quill编辑器 - vue3-quill
插件名称 vue3-quill
版本号 v0.2.6
发布时间 2021年5月8日
插件作者 flyween

Vue 3支持项目的另一个Quill编辑器。

安装和下载:

# NPM
$ npm i vue3-quill

使用:

1.导入并注册羽毛笔编辑器。

import { quillEditor, Quill } from 'vue3-quill'
import customQuillModule from 'customQuillModule'
Quill.register('modules/customQuillModule', customQuillModule)
// Register the component globally
app.use(quillEditor)
// Register the component locally
export default {
  components: {
    quillEditor
  }
}

2.将“羽毛笔编辑器”组件添加到您的应用程序。

<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>
import { reactive } from 'vue'
import { quillEditor } from 'vue3-quill'
export default {
  name: 'App',
  components: {
    quillEditor
  },
  setup() {
    const state = reactive({
      dynamicComponent: null,
      content: '<p>Initial Content</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 }
  }
}

3.默认编辑器选项。

theme: 'snow', // or 'bubble'
boundary: document.body,
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']
]
},
placeholder: 'Insert content here ...',
readOnly: false

变更日志:

v0.2.6 (06/21/2021)

  • 修复了初始化时“disabled”不起作用的问题