富文本插件有很多，之前在做项目的时候也看了很多资料，最后发现还是quill-editor这个插件做好用，支持功能的选择，还有可以自定义上传图片，很方便，我在移动端的微信公众号以及vue的管理分别使用了这个插件。
我们在vue中使用的时候，需要把相应的模块下载到你的node_modules里面。
1.在命令栏输入：npm install vue-quill-editor --save;
2.在你的vue-ceil中的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'
如图所示：
3.在需要使用该组件的页面中：
3.1引入模块：import { quillRedefine } from "vue-quill-editor-upload";
定义常用的模块
const toolbarOptions = [
["bold", "italic", "underline", "image"], // toggled buttons
[{ header: 1 }, { header: 2 }],
[{ color: [] }]
];
3.2在指定的<template>
<quill-editor
ref="QuillEditor"
:content="content"
:options="editorOption"
@change="onEditorChange($event)"
></quill-editor>
</template>
3.3需要在data里面配置参数
editorOption: {
modules: {
toolbar: {
container: toolbarOptions, // 工具栏
handlers: {
image: function(value) {
if (value) {
document.getElementById("upload_filed").click();
} else {
this.quill.format("image", false);
}
}
}
}
}
3.4methods里面需要定义方法
handleSuccess(res) {
// 获取富文本组件实例
console.log(res, "21323");
let quill = this.$refs.QuillEditor.quill;
// 如果上传成功
if (res) {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片，res为服务器返回的图片链接地址
quill.insertEmbed(length, "image", res);//自定义上传
// 调整光标到最后
quill.setSelection(length + 1);
} else {
// 提示信息，需引入Message
Message.error("图片插入失败");
}
},
//上传图片的方法使用的传统的input方法上传的
fileChanged(e) {
const file = e.file;
this.fr = new FileReader();
this.targetImg = new FormData();
this.targetImg.append("file", file, file.name);
this.fr.readAsDataURL(file);
this.fr.onload = e => {
this.upImg = e.target.result;
this.values = null;
};
if (this.targetImg) {
uploadFile(projectList.file.uploadFile, this.targetImg).then(res => {
if (res.data.resultCode == "000000") {
let lit = "http://cfile.12365ai.cn" + res.data.url;
Toast({
message: "图片上传成功",
position: "bottom",
duration: 1000
});
this.handleSuccess(lit);
}
});
}
},
网友评论