editor-357test v1.0.11

说明： 目前的包名只是测试，后续的包名会进行修改，修改之后和包名相关的路径都需要修改。

安装

npm i editor-357test

使用

导入样式

import 'editor-357test/dist/quill.core.css'
import 'editor-357test/dist/quill.snow.css'
import 'editor-357test/dist/quill.bubble.css'

quill.core.css是必须导入的样式。quill.snow.css和quill.bubble.css是主题样式，后续可根据quill的配置切换主题

导入编辑器

此包默认会导出一个对象

{
    Quill, // 编辑器构造函数
    install, // 暴露给vue.js
    quillEditor // 编辑器组件
}

直接导入

import Editor from 'editor-357test'
Vue.use(Editor)

通过Vue.use之后会在Vue全局注册quill-editor组件。直接使用该组件即可使用编辑器。

自定义编辑器配置

编辑器的默认配置写在quillEditor组件下，默认配置如下：

const defaultOptions = {
    theme: 'snow',
    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 text here ...',
    readOnly: false
  }

修改默认配置只需要在vue.use后面传入配置对象即可

Vue.use(VueEditor, {
  theme: "snow",
  modules: {
    toolbar: [
      ["bold", "italic"],
      [{ header: 1 }, { header: 2 }],
    ],
  },
});