如何为 Codemirror6 添加拖拽上传图片的功能

Codemirror6 中有一个API允许你为编辑器主体所在的 dom 添加监听，官方文档如下：

官方文档

你可以为 content 添加任意事件的监听，那么我们可以添加一个drop事件监听来判断拖入到编辑器中的内容是什么，完整代码如下：

const state:EditorState = EditorState.create({
  doc: '',
  extensions: [
    basicSetup,
    cmmd({ codeLanguages: languages }),
    // 添加监听
    EditorView.domEventHandlers({
      // 添加 drop 监听
      drop(event: DragEvent) {
        let data: DataTransfer | null = event.dataTransfer
        if (data && data.files.length && data.files.length > 0) {
          // 可以一次性拖拽多个文件，将会获得一个文件列表
          for (const file of data.files) {
            const form = new FormData()
            form.append('file', file);
            form.append('name', file.name);
            // 调用你的上传API
            uploadFileApi(form).then(resp => {
              // 将当前选中替换为传入的内容，如果没有选中则会在光标位置插入该内容
              editor.state.replaceSelection(`\n![${file.name}](${resp.data})\n`)
            })
          }
        }
        // 如果你返回null
        return
      }
    })
  ]
})

// 创建编辑器实例
EditorView editor = new EditorView({
  // 上方创建的 state
  state: state,
  // 编辑器的父 dom 元素
  parent: parent
})

更多关于 codemirror6 的用法可以查看《如何使用 Codemirror6 创建一个代码编辑器》

在作者使用时，对 codemirror 进行了简单的封装，可以前往查看：

Github: codemirror 封装
Gitee : codemirror 封装

顺便吐槽一下，codemirror6的文档是真难读

如何为 Codemirror6 添加拖拽上传图片的功能

目录

如何为 Codemirror6 添加拖拽上传图片的功能