|
|
@ -1,17 +1,8 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<el-upload |
|
|
|
:action="uploadUrl" |
|
|
|
:before-upload="handleBeforeUpload" |
|
|
|
:on-success="handleUploadSuccess" |
|
|
|
:on-error="handleUploadError" |
|
|
|
name="file" |
|
|
|
:show-file-list="false" |
|
|
|
:headers="headers" |
|
|
|
style="display: none" |
|
|
|
ref="upload" |
|
|
|
v-if="this.type == 'url'" |
|
|
|
> |
|
|
|
<el-upload :action="uploadUrl" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccess" |
|
|
|
:on-error="handleUploadError" name="file" :show-file-list="false" :headers="headers" style="display: none" |
|
|
|
ref="upload" v-if="this.type == 'url'"> |
|
|
|
</el-upload> |
|
|
|
<div class="editor" ref="editor" :style="styles"></div> |
|
|
|
</div> |
|
|
@ -60,7 +51,8 @@ export default { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址 |
|
|
|
// uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", |
|
|
|
uploadUrl: process.env.VUE_APP_BASE_API + "/system/ftpfile/uploadFile", // 上传的图片服务器地址 |
|
|
|
headers: { |
|
|
|
Authorization: "Bearer " + getToken() |
|
|
|
}, |
|
|
@ -173,10 +165,11 @@ export default { |
|
|
|
let quill = this.Quill; |
|
|
|
// 如果上传成功 |
|
|
|
if (res.code == 200) { |
|
|
|
console.log(res) |
|
|
|
// 获取光标所在位置 |
|
|
|
let length = quill.getSelection().index; |
|
|
|
// 插入图片 res.url为服务器返回的图片地址 |
|
|
|
quill.insertEmbed(length, "image", process.env.VUE_APP_BASE_API + res.fileName); |
|
|
|
quill.insertEmbed(length, "image", res.data.url); |
|
|
|
// 调整光标到最后 |
|
|
|
quill.setSelection(length + 1); |
|
|
|
} else { |
|
|
@ -191,16 +184,20 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
.editor, .ql-toolbar { |
|
|
|
.editor, |
|
|
|
.ql-toolbar { |
|
|
|
white-space: pre-wrap !important; |
|
|
|
line-height: normal !important; |
|
|
|
} |
|
|
|
|
|
|
|
.quill-img { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
.ql-snow .ql-tooltip[data-mode="link"]::before { |
|
|
|
content: "请输入链接地址:"; |
|
|
|
} |
|
|
|
|
|
|
|
.ql-snow .ql-tooltip.ql-editing a.ql-action::after { |
|
|
|
border-right: 0px; |
|
|
|
content: "保存"; |
|
|
@ -215,14 +212,17 @@ export default { |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item::before { |
|
|
|
content: "14px"; |
|
|
|
} |
|
|
|
|
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before, |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before { |
|
|
|
content: "10px"; |
|
|
|
} |
|
|
|
|
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before, |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before { |
|
|
|
content: "18px"; |
|
|
|
} |
|
|
|
|
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before, |
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before { |
|
|
|
content: "32px"; |
|
|
@ -232,26 +232,32 @@ export default { |
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-item::before { |
|
|
|
content: "文本"; |
|
|
|
} |
|
|
|
|
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, |
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { |
|
|
|
content: "标题1"; |
|
|
|
} |
|
|
|
|
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, |
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { |
|
|
|
content: "标题2"; |
|
|
|
} |
|
|
|
|
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, |
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { |
|
|
|
content: "标题3"; |
|
|
|
} |
|
|
|
|
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, |
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { |
|
|
|
content: "标题4"; |
|
|
|
} |
|
|
|
|
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, |
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before { |
|
|
|
content: "标题5"; |
|
|
|
} |
|
|
|
|
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, |
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before { |
|
|
|
content: "标题6"; |
|
|
@ -261,12 +267,13 @@ export default { |
|
|
|
.ql-snow .ql-picker.ql-font .ql-picker-item::before { |
|
|
|
content: "标准字体"; |
|
|
|
} |
|
|
|
|
|
|
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before, |
|
|
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before { |
|
|
|
content: "衬线字体"; |
|
|
|
} |
|
|
|
|
|
|
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before, |
|
|
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before { |
|
|
|
content: "等宽字体"; |
|
|
|
} |
|
|
|
</style> |
|
|
|
}</style> |
|
|
|