富文本编辑器自定义上传地址
This commit is contained in:
parent
6810243ab7
commit
ccf05b697d
@ -1,5 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-upload
|
||||||
|
:action="uploadUrl"
|
||||||
|
:on-success="handleUploadSuccess"
|
||||||
|
:before-upload="handleBeforeUpload"
|
||||||
|
:on-error="handleUploadError"
|
||||||
|
name="file"
|
||||||
|
:show-file-list="false"
|
||||||
|
:headers="headers"
|
||||||
|
style="display: none;"
|
||||||
|
ref='upload'
|
||||||
|
v-if='this.uploadUrl'
|
||||||
|
>
|
||||||
|
</el-upload>
|
||||||
<div class="editor" ref="editor" :style="styles"></div>
|
<div class="editor" ref="editor" :style="styles"></div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -30,6 +45,11 @@ export default {
|
|||||||
readOnly: {
|
readOnly: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
|
},
|
||||||
|
/* 上传地址 */
|
||||||
|
uploadUrl: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@ -95,6 +115,26 @@ 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) {
|
||||||
|
let toolbar = this.Quill.getModule('toolbar');
|
||||||
|
toolbar.addHandler('image', (value) => {
|
||||||
|
this.uploadType = 'image';
|
||||||
|
if (value) {
|
||||||
|
this.$refs.upload.$children[0].$refs.input.click();
|
||||||
|
} else {
|
||||||
|
this.quill.format('image', false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
toolbar.addHandler('video', (value) => {
|
||||||
|
this.uploadType = 'video';
|
||||||
|
if (value) {
|
||||||
|
this.$refs.upload.$children[0].$refs.input.click();
|
||||||
|
} else {
|
||||||
|
this.quill.format('video', false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
this.Quill.pasteHTML(this.currentValue);
|
this.Quill.pasteHTML(this.currentValue);
|
||||||
this.Quill.on("text-change", (delta, oldDelta, source) => {
|
this.Quill.on("text-change", (delta, oldDelta, source) => {
|
||||||
const html = this.$refs.editor.children[0].innerHTML;
|
const html = this.$refs.editor.children[0].innerHTML;
|
||||||
|
Loading…
Reference in New Issue
Block a user