正在显示
1 个修改的文件
包含
40 行增加
和
0 行删除
| 1 | <template> | 1 | <template> |
| 2 | + <div> | ||
| 3 | + <el-upload | ||
| 4 | + :action="uploadUrl" | ||
| 5 | + :on-success="handleUploadSuccess" | ||
| 6 | + :before-upload="handleBeforeUpload" | ||
| 7 | + :on-error="handleUploadError" | ||
| 8 | + name="file" | ||
| 9 | + :show-file-list="false" | ||
| 10 | + :headers="headers" | ||
| 11 | + style="display: none;" | ||
| 12 | + ref='upload' | ||
| 13 | + v-if='this.uploadUrl' | ||
| 14 | + > | ||
| 15 | + </el-upload> | ||
| 2 | <div class="editor" ref="editor" :style="styles"></div> | 16 | <div class="editor" ref="editor" :style="styles"></div> |
| 17 | + </div> | ||
| 3 | </template> | 18 | </template> |
| 4 | 19 | ||
| 5 | <script> | 20 | <script> |
| @@ -30,6 +45,11 @@ export default { | @@ -30,6 +45,11 @@ export default { | ||
| 30 | readOnly: { | 45 | readOnly: { |
| 31 | type: Boolean, | 46 | type: Boolean, |
| 32 | default: false, | 47 | default: false, |
| 48 | + }, | ||
| 49 | + /* 上传地址 */ | ||
| 50 | + uploadUrl: { | ||
| 51 | + type: String, | ||
| 52 | + default: '', | ||
| 33 | } | 53 | } |
| 34 | }, | 54 | }, |
| 35 | data() { | 55 | data() { |
| @@ -95,6 +115,26 @@ export default { | @@ -95,6 +115,26 @@ export default { | ||
| 95 | init() { | 115 | init() { |
| 96 | const editor = this.$refs.editor; | 116 | const editor = this.$refs.editor; |
| 97 | this.Quill = new Quill(editor, this.options); | 117 | this.Quill = new Quill(editor, this.options); |
| 118 | + // 如果设置了上传地址则自定义图片和视频的上传事件 | ||
| 119 | + if (this.uploadUrl) { | ||
| 120 | + let toolbar = this.Quill.getModule('toolbar'); | ||
| 121 | + toolbar.addHandler('image', (value) => { | ||
| 122 | + this.uploadType = 'image'; | ||
| 123 | + if (value) { | ||
| 124 | + this.$refs.upload.$children[0].$refs.input.click(); | ||
| 125 | + } else { | ||
| 126 | + this.quill.format('image', false); | ||
| 127 | + } | ||
| 128 | + }); | ||
| 129 | + toolbar.addHandler('video', (value) => { | ||
| 130 | + this.uploadType = 'video'; | ||
| 131 | + if (value) { | ||
| 132 | + this.$refs.upload.$children[0].$refs.input.click(); | ||
| 133 | + } else { | ||
| 134 | + this.quill.format('video', false); | ||
| 135 | + } | ||
| 136 | + }); | ||
| 137 | + } | ||
| 98 | this.Quill.pasteHTML(this.currentValue); | 138 | this.Quill.pasteHTML(this.currentValue); |
| 99 | this.Quill.on("text-change", (delta, oldDelta, source) => { | 139 | this.Quill.on("text-change", (delta, oldDelta, source) => { |
| 100 | const html = this.$refs.editor.children[0].innerHTML; | 140 | const html = this.$refs.editor.children[0].innerHTML; |
-
请 注册 或 登录 后发表评论