【VUE常用插件】vue-quill-editor简单使用

最开始用的是大名鼎鼎的百度富文本编辑器UEditor 挺麻烦 要下载包 要引入 要封装
完了之后还上传不了图片 老是报错 要用php配置后台 比较麻烦
于是 就开启了vue-quill-editor的篇章 简单 轻量级 使用步骤如下：

1.安装依赖包 执行如下命令

cnpm install vue-quill-editor --save

2.在main.js中全局引入

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor);

3.在页面中使用

<quill-editor v-model="content" ref="myQuillEditor" :options="editorOption"></quill-editor>

三步搞定 就是这么简单 给你们看一张我的美图吧

写在后面：上传图片默认是将图片转为base64编码的 如果需要上传到自己特定的服务器 需要进行配置

// 上传图片参数配置
const uploadConfig = {
    action:  '',  // 必填参数 图片上传地址
    methods: 'POST',  // 必填参数 图片上传方式
    token: '',  // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
    name: 'img',  // 必填参数 文件的参数名
    size: 500,  // 可选参数   图片大小，单位为Kb, 1M = 1024Kb
    accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'  // 可选 可上传的图片格式
};

// toolbar工具栏选项配置（默认展示全部）
const toolOptions = [
    ['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']
];