简体中文|English

This is an image upload plugin for CodeMirror that supports pasting or dragging and dropping images and uploading them to a server. The plugin allows using either a default fetch upload logic or custom upload logic.

1npm install @meanc/codemirror-ext

Usage

1import { EditorState, EditorView, basicSetup } from "codemirror";
2import { markdown } from "@codemirror/lang-markdown";
3import { PicUploadExt } from "@meanc/codemirror-ext";
4
5// official upload logic
6const imgUploadExt = PicUploadExt({
7  storageServer: 'http://www.example/imagePut',
8  callback: (res) => {
9    return res.data.url;
10  }
11});
12
13// custom upload logic
14const customUpload = async (file) => {
15  const formData = new FormData();
16  formData.append('file', file);
17  const res = await fetch('http://www.example/imagePut', {
18    method: 'POST',
19    body: formData
20  });
21  const json = await res.json();
22  return json.data.url;
23};
24
25const uploadCustomExt = PicUploadExt({
26  upload: customUpload
27});
28
29// 初始化编辑器
30const startState = EditorState.create({
31  extensions: [basicSetup, markdown(), imgUploadExt] // 或者 uploadCustomExt
32});
33
34const view = new EditorView({
35  state: startState,
36  parent: document.body // 或者你的容器元素
37});

Configuration Options

•	storageServer: The URL of the storage server, default is empty.
•	upload: Custom upload function that returns an image URL. This function should accept a File object and return a Promise<string>.
•	callback: A callback function to process the upload response and return the image URL.