Tui.Editor 实现图片粘贴上传到七牛云


tui.editor介绍

  • 一款支持markdown、wyswyg模式的编辑器
  • Github

实现步骤

1. 去除默认的addImageBlobHook监听事件

tui.editor支持三种图片上传方式：弹窗、拖拽、截屏粘贴。查看文档并测试可知，三种上传方式最终都会被addImageBlobHook监听，并处理为Base64格式的图片。
所以，第一步，我们要去除默认的addImageBlobHook监听事件

  • 此处为默认的addImageBlobHook监听事件，位于src/js/importManager.js中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 /**
   * Initialize default image importer
   * @private
   */
  _initDefaultImageImporter() {
    this.eventManager.listen('addImageBlobHook', (blob, callback) => {
      const reader = new FileReader();

      reader.onload = event => {
        callback(event.target.result);
      };

      reader.readAsDataURL(blob);
    });
  }
  • eventManager.js中提供了删除监听事件的函数removeEventHandler(typeStr, handler)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  /**
   * Remove event handler from given event type
   * @param {string} typeStr Event type name
   * @param {function} [handler] - registered event handler
   */
  removeEventHandler(typeStr, handler) {
    const { type, namespace } = this._getTypeInfo(typeStr);

    if (type && handler) {
      this._removeEventHandlerWithHandler(type, handler);
    } else if (type && !namespace) {
      // dont use dot notation cuz eslint
      this.events.delete(type);
    } else if (!type && namespace) {
      this.events.forEach((eventHandlers, eventType) => {
        this._removeEventHandlerWithTypeInfo(eventType, namespace);
      });
    } else if (type && namespace) {
      this._removeEventHandlerWithTypeInfo(type, namespace);
    }
  }
  • 删除监听事件
1
2
// 删除默认监听事件
this.editor.eventManager.removeEventHandler('addImageBlobHook')
2. 添加自定义的addImageBlobHook监听事件
1
2
3
4
5
6
7
    // 添加自定义监听事件
    this.editor.eventManager.listen('addImageBlobHook', (blob, callback) => {
      // 此处填写自己的上传逻辑，url为上传后的图片地址
      this.upload(blob, url => {
        callback(url)
      })
    })

3. 实现自己的上传逻辑

实现文件上传

4. 最终结果

完美解决三种方式（Popup、Drag、Screenshot）按照自己的上传逻辑进行图片上传

完整源码

  • tui.editor 版本
    "@toast-ui/editor": "^2.1.2"

  • 基于vue的源码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<template>
  <div ref="toastUIEditor" />
</template>

<script>
import 'codemirror/lib/codemirror.css'
import '@toast-ui/editor/dist/toastui-editor.css'
import 'tui-color-picker/dist/tui-color-picker.css'

import Editor from '@toast-ui/editor'
import colorSyntax from '@toast-ui/editor-plugin-color-syntax'

export default {
  name: 'Markdown',
  data() {
    return {
      editor: null
    }
  },
  mounted() {
    const options = {
      el: this.$refs.toastUIEditor,
      previewStyle: 'vertical',
      height: '500px',
      initialEditType: 'markdown',
      initialValue: 'Select some text and choose a color from the toolbar.',
      plugins: [colorSyntax]
    }
    this.editor = new Editor(options)
    // 删除默认监听事件
    this.editor.eventManager.removeEventHandler('addImageBlobHook')
    // 添加自定义监听事件
    this.editor.eventManager.listen('addImageBlobHook', (blob, callback) => {
      // 此处填写自己的上传逻辑，url为上传后的图片地址
      this.upload(blob, url => {
        callback(url)
      })
    })
  },
  methods: {
    /**
     * 上传至服务器
     */
    upload(file, callback) {
      const formData = new FormData()
      formData.append('file', file)
      const ajax = new XMLHttpRequest()
      ajax.open('POST', 'http://localhost:9100/qiniu/upload', true)
      ajax.send(formData)
      ajax.onreadystatechange = function() {
        if (ajax.readyState === 4) {
          if ((ajax.status >= 200 && ajax.status < 300) || ajax.status === 304) {
            console.log('上传成功')
            const obj = JSON.parse(ajax.responseText)
            callback(obj.result)
          }
        }
      }
    }
  }
}
</script>