vue-easy-editor

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

Usage no npm install needed!

<script type="module">
  import vueEasyEditor from 'https://cdn.skypack.dev/vue-easy-editor';
</script>

README

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 自定义功能按钮 -