作者 hechieh

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

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;