vue-ele-form-quill-editor | vue-ele-form 的一个富文本编辑器

介绍

安装

npm install vue-ele-form-quill-editor --save

使用

import EleForm from 'vue-ele-form'
import EleFormQuillEditor from 'vue-ele-form-quill-editor'
// 注册 vue-ele-form
Vue.use(EleForm, {
 // 全局设置
 // 可以为编辑器配置全局属性, 每个实例都共享这个属性
 'quill-editor': {
 // 比如设置上传 action 后, 所有的 quill-editor 编辑器上传图片都会采用这个属性
 action: 'https://xxx.com/upload/images'
 }
})
// 注册 quill-editor 组件
Vue.component('quill-editor', EleFormQuillEditor)

// 局部设置
formDesc: {
 xxx: {
 label: 'xxx',
 type: 'quill-editor', // 只需要在这里指定为 quill-editor 即可
 // 属性由两部分组成
 // 1.上传图片相关属性
 // 2.编辑器相关属性, 参考: https://github.com/davidroyer/vue2-editor 和 https://quilljs.com/
 attrs: {
 // 上传相关
 action: 'https://xxx.com/upload/images', // 上传地址
 data: {token: 'xxx'},
 // 对响应结果进一步处理
 responseFn (response, file) {
 return 'https://xxx.com/upload/images' + response.url // 这里返回上传后的url即可
 },
 // 编辑器相关属性
 placeholder: '请输入...'
 }
 }
}

示例

<template>
 <ele-form
 v-model="formData"
 :form-desc="formDesc"
 :request-fn="handleRequest"
 :span="22"
 @request-success="handleSuccess"
 />
</template>
<script>
export default {
 data () {
 return {
 formData: {},
 formDesc: {
 content: {
 label: '文章内容',
 type: 'quill-editor',
 attrs: {
 action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
 responseFn (response, file) {
 // 因为是 mock 地址, 所以, 总是返回同一张图片的URL, 正常使用的时候不会
 return response.url
 }
 }
 }
 }
 }
 },
 methods: {
 handleRequest (data) {
 console.log(data)
 return Promise.resolve()
 },
 handleSuccess () {
 this.$message.success('提交成功')
 }
 }
}
</script>

上传图片说明

props: {
 // 上传地址
 action: String,
 // 图片大小限制
 fileSize: {
 type: Number
 },
 // 文件名
 name: {
 type: String,
 default: 'file'
 },
 // 上传图片的头部
 headers: Object,
 // 是否需要带cookie
 withCredentials: Boolean,
 // 自定义上传数据, 例如 {token: xxx}
 data: Object,
 // 上传成功的进一步处理
 responseFn: Function
}

相关链接