Vue使用改写富文本框vue-quill-editor图片组件el-upload上传到服务器
这里是使用elementui 中的上传组件实现的 之前看到也可以有用别人的组件 我使用没有效果
所以用的是修改富文本框中的图片组件为上传的 然后进行操作。
新建vueDemo工程
引入ElementUi 不会的可以看我之前的写的。
https://blog.csdn.net/lyl815616/article/details/103306026
新建富文本框页面
页面配置完成后记得配置下路由
接下来安装 富文本组件
npm install vue-quill-editor
npm install quill
安装完后 我们去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'
Vue.use(VueQuillEditor)
页面代码 我这边因业务需求 带有两个富文本框
<template>
<div class="demo">
<div>测试-----------------------------></div>
<!-- 富文本框 -->
<div>
<el-upload
class="avatar-uploader1"
:action="serverUrl"
name="file"
:headers="header"
:show-file-list="false"
:on-success="uploadSuccess1"
:on-error="uploadError"
:before-upload="beforeUpload1"
></el-upload>
<!--富文本编辑器组件-->
<el-row v-loading="quillUpdateImg">
<quill-editor
v-model="detailContent"
ref="myQuillEditor"
:options="editorOption"
@change="onEditorChange($event)"
></quill-editor>
</el-row>
</div>
<div>测试1111111-----------------------------></div>
<!-- 富文本框 -->
<div>
<el-upload
class="avatar-uploader2"
:action="serverUrl"
name="file"
:headers="header"
:show-file-list="false"
:on-success="uploadSuccess2"
:on-error="uploadError"
:before-upload="beforeUpload2"
></el-upload>
<!--富文本编辑器组件-->
<el-row v-loading="quillUpdateImg1">
<quill-editor
v-model="detailContent1"
ref="myQuillEditor1"
:options="editorOption1"
@change="onEditorChange($event)"
></quill-editor>
</el-row>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
这样页面中就出现了 两个富文本框
接下来 就是变量的处理了。
我这边用啊axios请求。所以引入：
npm install --save axios
<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
];
const toolbarOptions1 = [
["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 axios from "axios";
export default {
data() {
return {
serverUrl: "XXXXXXXXXXXXXXXXXXXXXXXXXXX", // 这里写你要上传的图片服务器地址
header: {
token: sessionStorage.token }, // 有的图片服务器要求请求头需要有token之类的参数，写在这里
detailContent: "", // 富文本内容
detailContent1: "", // 富文本内容
quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
quillUpdateImg1: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
editorOption: {
placeholder: "",
theme: "snow", // or 'bubble'
modules: {
toolbar: {
container: toolbarOptions, // 工具栏
handlers: {
image: function(value) {
if (value) {
document.querySelector(".el-upload__input").click();
} else {
this.quill.format("image", false);
}
}
}
}
}
},
editorOption1: {
placeholder: "",
theme: "snow", // or 'bubble'
modules: {
toolbar: {
container: toolbarOptions1, // 工具栏
handlers: {
image: function(value) {
if (value) {
// alert("!")
document.querySelector('.avatar-uploader2 .el-upload__input').click();
} else {
this.quill.format("image", false);
}
}
}
}
}
},
}
},
methods: {
onEditorChange() {
//内容改变事件
},
// 富文本图片上传前
beforeUpload1() {
// 显示loading动画
console.log("第一个上传的框")
this.quillUpdateImg = true;
},
beforeUpload2() {
// 显示loading动画
console.log("第二个上传的框")
this.quillUpdateImg1 = true;
},
uploadSuccess1(res, file) {
// res为图片服务器返回的数据
// 获取富文本组件实例
let quill = this.$refs.myQuillEditor.quill;
// 第一个upload
console.log(res.data)
// 如果上传成功
// if (res.code === "200" && res.info !== null) {
// 获取光标所在位置
debugger
let length = quill.getSelection().index;
// 插入图片 res.info为服务器返回的图片地址
quill.insertEmbed(length, "image", res.data);
// 调整光标到最后
quill.setSelection(length + 1);
// } else {
// this.$message.error("图片插入失败");
// }
// loading动画消失
this.quillUpdateImg = false;
},
uploadSuccess2(res, file) {
// res为图片服务器返回的数据
// 获取富文本组件实例
let quill = this.$refs.myQuillEditor1.quill;
console.log(res.data)
// 如果上传成功
// if (res.code === "200" && res.info !== null) {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片 res.info为服务器返回的图片地址
quill.insertEmbed(length, "image", res.data);
// 调整光标到最后
quill.setSelection(length + 1);
// } else {
// this.$message.error("图片插入失败");
// }
// loading动画消失
this.quillUpdateImg1 = false;
},
// 富文本图片上传失败
uploadError() {
// loading动画消失
this.quillUpdateImg = false;
this.$message.error("图片插入失败");
}
}
}
</script>
到此结束~