vue-easy-editor

一个基于 quill 的 Vue 富文本编辑器组件，开箱即用。

安装

npm

npm i vue-easy-editor -S

yarn

yarn add vue-easy-editor

CDN

<script type="text/javascript" src="https://unpkg.com/vue-easy-editor/lib/index.umd.min.js"></script>
<script type="text/javascript">
  Vue.use(window.VueEasyEditor)
</script>

使用

全局注册

import Vue from 'vue'
import { VueEasyEditor } from 'vue-easy-editor'
import 'vue-easy-editor/lib/index.css'

Vue.use(VueEasyEditor)

局部注册

import { VueEasyEditor } from 'vue-easy-editor'
import 'vue-easy-editor/lib/index.css'

export default {
  components: {
    VueEasyEditor
  }
}

基本使用

<template>
  <div class="demo">
    <vue-easy-editor v-model="editorHtml" @image-upload="handleImageUpload" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      editorHtml: ''
    }
  },

  methods: {
    handleImageUpload (files, editor, done) {
      console.log(files, editor, done)
    }
  }
}
</script>

定制字体大小

由于 vue-easy-editor 的字体大小本身就是定制过的，但肯定不能满足所有需求，所以如果你需要再次定制，也完全是 OK 的，范例如下

<template>
  <div class="home">
    <vue-easy-editor v-model="editorHtml" :sizes="sizes" />
  </div>
</template>

<script>
import { VueEasyEditor } from 'packages/index'
export default {
  name: 'home',

  components: {
    VueEasyEditor
  },

  data () {
    return {
      editorHtml: '',
      sizes: {
        item: ['26rem', '30rem', '33rem', '36rem', '40rem', '43rem', '46rem', '50rem'],
        default: '33rem'
      }
    }
  }
}
</script>

<style lang="scss">
@mixin rich-size() {
  @each $size in ['26rem', '30rem', '33rem', '36rem', '40rem', '43rem', '46rem', '50rem'] {
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="#{$size}"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="#{$size}"]::before {
      content: '#{$size}';
      font-size: #{$size};
    }
  }
}
html {
  font-size: 0.5px;
}
.vue-easy-editor {
  @include rich-size();
}
</style>

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | value | 内容 | string | — | — | | height | 文本框高度 | string | — | '300px' | | sizes | 字体大小选项 | object | { item: string[], default: string } | { item: ['12px', '13px', '14px', '16px', '20px', '24px', '28px'], default: '14px' } | | fonts | 字体选项 | object | { item: string[], default: string } | { item: ['sans serif', 'serif', 'monospace'], default: 'sans serif' } | | headers | 标题选项 | array | number[] | [1, 2, 3, 4] | | aligns | 居中选项 | object | { item: string[], default: string } | { item: ['', 'center', 'right', 'justify'], default: '' } | | canCustom | 是否可自定义功能按钮 | boolean | boolean | false | | config | 文本配置 | object | — | 详细看 quill config 配置 |

Events

| 事件名称 | 说明 | 回调参数 | |---------- |-------- |---------- | | change | 文本change事件 | value：文本内容 | | input | 文本input事件 | value：文本内容 | | image-upload | 图片上传事件 | files：上传文件, editor：编辑器, done：图片上传完成的回调，执行会直接插入上传好的图片到富文本制定的位置 |

slot

| 事件名称 | 说明 | 回调参数 | |---------- |-------- |---------- | | custom-button | 自定义功能按钮 | - |