vue-quill-editor封装的组件

• quillEditor.vue
• • 需要注意的点
  • 页面可以多次调用

quillEditor.vue

<template>
<div>
<quill-editor
:id="randomId(3)"
:ref="myEditor"
v-model="content"
:options="options"
@change="onChange($event)"
style="width: 100%; height: 100%"
/>
<el-upload 
:key="randomId(3)"
class="upload-col"
:auto-upload="false"
:accept="accept"
action=""
multiple
:before-upload="beforeUpload"
:data="myHeaders"
:on-change="fileAdd"
ref="upload"
>
</el-upload>
</div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { 
quillEditor
} from 'vue-quill-editor'
/** * 富文本 * content 内容 * options 参数配置 * */
// 工具栏配置
const toolbarOptions = [
["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
["blockquote", "code-block"],                    // 引用 代码块
[{  list: "ordered" }, {  list: "bullet" }],       // 有序、无序列表
[{  indent: "-1" }, {  indent: "+1" }],            // 缩进
[{  size: ["small", false, "large", "huge"] }],   // 字体大小
[{  header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
[{  color: [] }, {  background: [] }],             // 字体颜色、字体背景颜色
[{  align: [] }],                                 // 对齐方式
["clean"],                                       // 清除文本格式
["link", "image", "video"]                       // 链接、图片、视频
];
export default { 
props: { 
/* 编辑器的内容 */
value: { 
type: String
},
/* 编辑器的索引 */
quillIndex: { 
type: Number,
default: 0
},
/* 编辑器的唯一标识符 */
myEditor: { 
type: String,
default: "quillEditor"
}
},
components: { 
quillEditor
},
computed: { 
editor () { 
return this.$refs.myEditor.quillEditor;
},
},
data () { 
return { 
accept: 'image/*',
imageTypes: ['jpg', 'jpeg', 'png', 'gif'],
maxFileLen: 0,
content: this.value,
options: { 
theme: "snow", // or 'bubble'
placeholder: "请输入内容",
modules: { 
toolbar: { 
container: toolbarOptions,
handlers: { 
image: (value) => { 
if (value) { 
document.querySelectorAll(".upload-col input")[this.quillIndex].click();
} else { 
this.quill.format("image", false);
}
}
}
}
}
},
myHeaders: {  token: localStorage.getItem('token') },
}
},
watch: { 
value: function () { 
this.content = this.value;
}
},
methods: { 
randomId (len) { 
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
var tempLen = chars.length, tempStr = '';
for (var i = 0; i < len; ++i) { 
tempStr += chars.charAt(Math.floor(Math.random() * tempLen));
}
return tempStr;
},
// 图片单个或者批量按照顺序上传
fileAdd (fileobj, filelist) { 
let currLength = filelist.length
this.maxFileLen = Math.max(currLength, this.maxFileLen)
setTimeout(() => { 
if (currLength != this.maxFileLen) return
this.maxFileLen = 0
this.$refs.upload.clearFiles()
this.fileUpload(filelist)
})
},
fileUpload (files) { 
var param = new FormData()
files.forEach(item => { 
param.append('fileList', item.raw)
})
this.$http({ 
url: this.$http.adornUrl('XXXXXX'),
method: 'post',
data: param
}).then(res => { 
if (res.data.code === 0) { 
const quill = this.$refs["" + this.myEditor+ ""].quill
, length = quill.getSelection().index
var fileList = res.data.fileList.reverse()
fileList.forEach(item => { 
quill.insertEmbed(length, 'image', item)
quill.setSelection(length + 1) //定位索引
})
}
}).catch(err => { 
this.$message.error('上传图片失败！请重新上传')
})
},
beforeUpload (file) { 
const isLt2M = file.size / 1024 / 1024 < 2
if (!isLt2M) { 
this.$message({ 
message: '图片单张不得超过2M，请重新选择！',
type: 'error'
})
}
return isLt2M
},
onChange({  html }) { 
this.$emit("input", this.content);
}
}
}
</script>
<style lang="scss" scoped>
.upload-col { 
height: 0;
width: 0;
overflow: hidden;
}
</style>

需要注意的点

<el-upload> 和<quill-editor> 里面的id 和 key ，取随机数 randomId(3)

富文本组件里的ref属性 :ref="myEditor"

批量图片调用后需要清空 this.$refs.upload.clearFiles()，才能再一次使用

页面可以多次调用

<template>
<quill-editor v-model="content1" :quillIndex="0" myEditor="Editorc0"/>
<quill-editor v-model="content2" :quillIndex="1" myEditor="Editorc1"/>
.
.
.
</template>
<script>
import quillEditor from './quillEditor'
export default { 
data () { 
return{ 
content1:'',
content2:''
}
},
components: { 
quillEditor
}
}
</script>

本文地址：https://blog.csdn.net/ajia0601/article/details/113980462