Song/xkrs_ms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

富文本编辑器支持自定义上传地址

Browse Source
This commit is contained in:
RuoYi 2021-04-13 09:38:32 +08:00
parent dcb9839596
commit e71c00e6fa
1 changed files with 36 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
ruoyi-ui/src/components/Editor/index.vue
View File

@ -3,14 +3,13 @@
<el-upload <el-upload
:action="uploadUrl" :action="uploadUrl"
:on-success="handleUploadSuccess" :on-success="handleUploadSuccess"
:before-upload="handleBeforeUpload"
:on-error="handleUploadError" :on-error="handleUploadError"
name="file" name="file"
:show-file-list="false" :show-file-list="false"
:headers="headers" :headers="headers"
style="display: none;" style="display: none"
ref='upload' ref="upload"
v-if='this.uploadUrl' v-if="this.uploadUrl"
> >
</el-upload> </el-upload>
<div class="editor" ref="editor" :style="styles"></div> <div class="editor" ref="editor" :style="styles"></div>
@ -22,6 +21,7 @@ import Quill from "quill";
import "quill/dist/quill.core.css"; import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css"; import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css"; import "quill/dist/quill.bubble.css";
import { getToken } from "@/utils/auth";
export default { export default {
name: "Editor", name: "Editor",
@ -49,11 +49,14 @@ export default {
/* 上传地址 */ /* 上传地址 */
uploadUrl: { uploadUrl: {
type: String, type: String,
default: '', default: "",
} }
}, },
data() { data() {
return { return {
headers: {
Authorization: "Bearer " + getToken()
},
Quill: null, Quill: null,
currentValue: "", currentValue: "",
options: { options: {
@ -72,7 +75,7 @@ export default {
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色 [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
[{ align: [] }], // 对齐方式 [{ align: [] }], // 对齐方式
["clean"], // 清除文本格式 ["clean"], // 清除文本格式
["link", "image", "video"] // 链接、图片、视频 ["link", "image"] // 链接、图片
], ],
}, },
placeholder: "请输入内容", placeholder: "请输入内容",
@ -115,23 +118,23 @@ export default {
init() { init() {
const editor = this.$refs.editor; const editor = this.$refs.editor;
this.Quill = new Quill(editor, this.options); this.Quill = new Quill(editor, this.options);
// 如果设置了上传地址则自定义图片和视频的上传事件 // 如果设置了上传地址则自定义图片上传事件
if (this.uploadUrl) { if (this.uploadUrl) {
let toolbar = this.Quill.getModule('toolbar'); let toolbar = this.Quill.getModule("toolbar");
toolbar.addHandler('image', (value) => { toolbar.addHandler("image", (value) => {
this.uploadType = 'image'; this.uploadType = "image";
if (value) { if (value) {
this.$refs.upload.$children[0].$refs.input.click(); this.$refs.upload.$children[0].$refs.input.click();
} else { } else {
this.quill.format('image', false); this.quill.format("image", false);
} }
}); });
toolbar.addHandler('video', (value) => { toolbar.addHandler("video", (value) => {
this.uploadType = 'video'; this.uploadType = "video";
if (value) { if (value) {
this.$refs.upload.$children[0].$refs.input.click(); this.$refs.upload.$children[0].$refs.input.click();
} else { } else {
this.quill.format('video', false); this.quill.format("video", false);
} }
}); });
} }
@ -154,6 +157,24 @@ export default {
this.$emit("on-editor-change", eventName, ...args); this.$emit("on-editor-change", eventName, ...args);
}); });
}, },
handleUploadSuccess(res, file) {
// 获取富文本组件实例
let quill = this.Quill;
// 如果上传成功
if (res.code == 200) {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片 res.url为服务器返回的图片地址
quill.insertEmbed(length, "image", res.url);
// 调整光标到最后
quill.setSelection(length + 1);
} else {
this.$message.error("图片插入失败");
}
},
handleUploadError() {
this.$message.error("图片插入失败");
},
}, },
}; };
</script> </script>