首先我使用的富文本编辑器是vue-quill-editor
使用npm进行下载
npm install vue-quill-editor --save
当然也可以按照官方的方法下载，到官方
因为我是在原有老项目上开发的使用的组件库是ant-design-vue 1x版，当然使用其他组件库也可以
然后还有重要的一步需要引入jquery后面有地方需要用到
使用npm进行下载jquery
npm install jquery --save;
下面直接上代码
<template><div><quill-editor ref="myQuillEditor" v-model="content" :options="editorOption" /><a-upload list-type="picture-card" class="quill-upload" :show-upload-list="false" :multiple="true" v-show="false":data="headerdata" action="https://upload-cn-east-2.qiniup.com" :before-upload="beforeUploadlogin"@change="handleChangeloginbig" :on-success="quillSuccess"><i class="el-icon-upload"></i></a-upload></div>
</template><script>const toolbarOptions = [['bold', 'italic', 'underline', 'strike'], // toggled buttons['blockquote', 'code-block'],[{header: 1}, {header: 2}], // custom button values[{list: 'ordered'}, {list: 'bullet'}],[{script: 'sub'}, {script: 'super'}], // superscript/subscript[{indent: '-1'}, {indent: '+1'}], // outdent/indent[{direction: 'rtl'}], // text direction[{size: ['small', false, 'large', 'huge']}], // custom dropdown[{header: [1, 2, 3, 4, 5, 6, false]}],[{color: []}, {background: []}], // dropdown with defaults from theme[{font: []}],[{align: []}],['link', 'image', 'video'],['clean'] // remove formatting button];import API from "@/Api/index.js";import UNITY from "@/commont/user.js";export default {data() {return {content: "",headerdata: {token: "",key: "",},loginimageUrlbig: [],URL: "",cyloginimageUrlbig: [],editorOption: {modules: {toolbar: {container: toolbarOptions,handlers: {// 重写点击组件上的图片按钮要执行的代码这里用到了jquery'image': (value) => {document.querySelector('.quill-upload .el-icon-upload').click()}}}}},cyput: 0}},created() {},methods: {async beforeUploadlogin(file) {this.cyput++let that = this;let time = new Date().getTime();time = time + '' + that.cyput//这边是封装的接口await API.UPLOADUPLOADTOKEN().then(res => {that.headerdata.token = res.data.data.token;that.headerdata.key = "permanent/head/" + time + '.png';that.URL = UNITY.getSession("qiniu_cdnurl");})const sizeOk = file.size < 1024 * 1000;if (!sizeOk) {this.$message.error('照片大小超过100K！');return}},handleChangeloginbig(info) {if (info.file.status === "done") {if (this.loginimageUrlbig.length < 9) {if (this.loginimageUrlbig[0] != "") {this.loginimageUrlbig.unshift("")}} else {this.loginimageUrlbig.shift()}let loCbig = this.URL + '/' + info.file.response.key;this.loginimageUrlbig.push(loCbig)if (loCbig) {// 获取文本编辑器let quill = this.$refs.myQuillEditor.quill// 获取光标位置let pos = quill.getSelection().index// 插入图片到光标位置quill.insertEmbed(pos, 'image', loCbig)} else {this.$essage.error('图片插入失败')}}},}}
</script><style scoped></style>
)
