vue 富文本存储_富文本编辑vue-quill-editor文件上传

需求：

在一个输入框中可以粘贴图片的功能

解决思路1：

使用富文本编辑插件代替input标签，将图片先上传至服务器，再将图片链接插入到富文本中，图片上传区域要隐藏，上传成功后在富文本编辑器中显示图片

解决思路2：

在本来的input输入框监听paste事件，如果是图片的话，将图片先上传至服务器，再将图片链接插入一个img标签，保存为一段html片段

步骤：

以下为使用富文本编辑解决方案，思路2也差不多一样的思路，只是形式不一样而已。

安装

npm install vue-quill-editor --save

main.js

import VueQuillEditor from 'vue-quill-editor'

Vue.use(VueQuillEditor);

import 'quill/dist/quill.core.css'

import 'quill/dist/quill.snow.css'

页面html核心代码

style="display: none"

class="quillEditerClass"

:action="action"

:data="data"

:on-success="handleSuccess"

:before-upload="beforeUpload"

:file-list="fileList"

list-type="picture-card"

ref="upload"

>

v-model="content"

ref="myQuillEditor"

:options="editorOption"

@blur="onEditorBlur($event)"

@focus="onEditorFocus($event)"

@change="onEditorChange($event)"

>

页面js核心代码：

data(){

return {

editorOption: {

placeholder: "请在这里输入",

modules: {

toolbar: {

container: [

["image"], //上传图片

],

handlers: {

image: function (value) {

if (value) {

// 调用iview图片上传

document

.querySelector(".quillEditerClass .el-icon-plus")

.click();

} else {

this.quill.format("image", false);

}

},

},

},

},

},

}

}

onEditorReady(editor) {

// 准备编辑器

},

onEditorBlur() {}, // 失去焦点事件

onEditorFocus() {}, // 获得焦点事件

onEditorChange() {

const quill = this.$refs["myQuillEditor"].quill;

console.log(quill.container.querySelector(".ql-editor").innerHTML);

this.remarks = quill.container.querySelector(".ql-editor").innerHTML;

}, // 内容改变事件

由于项目中图片上传需要在上传又拍云之前调用后台得到验证信息，所以在beforeUpload时加入一个请求

handleSuccess(response, file) {

if (response.code === 200) {

let quill = this.$refs.myQuillEditor.quill;

// 获取光标所在位置

let length = quill.getSelection().index;

// 插入图片，res为服务器返回的图片链接地址

quill.insertEmbed(

length,

"image",

`https://mx-cloud-storage-test-upyun.mxnavi.com${response.url}`

);

// 调整光标到最后

quill.setSelection(length + 1);

}

},

beforeUpload(file) {

return service

.newUpload({

oemId: this.$Global.USERINFO.LOGIN_USER_PRODUCTID,

fileName: file.name,

dirPath: "tour/web/img",

time: this.moment(new Date()).format("YYYYMMDDHHmmSSS"),

})

.then((json) => {

if (json.respCode === 100) {

this.action = json.data.uploadUrl;

this.downloadUrl = json.data.downloadUrl;

this.data = json.data.uploadFormDto;

} else {

this.$message.error("上传文件失败!");

}

});

},

整体思路

1.当使用富文本编辑器上传图片时，会触发隐藏的el-upload，实现自定义上传。

注意：否则粘贴上去的图片保存的数据是base64的，会很大，如果后台限制了很容易导致保存失败

2.上传成功之后得到的url使用quill.insertEmbed插入img标签。

3.通过this.remarks = quill.container.querySelector(".ql-editor").innerHTML保存为html片段。