面向CKEditor 5开发者的专业插件构建方案，一键生成带…

# CKEditor 5 v40.2 自定义图片上传插件（React 18 适配）

一、插件整体思路

• 继承 Plugin，注册 schema、命令、UI 按钮三部分
• 上传逻辑自行实现（fetch/axios 均可），不走官方 CKFinder，便于对接自有后端
• React 18 下用官方 @ckeditor/ckeditor5-react 的 <CKEditor> 组件挂载

二、完整代码

```js

import { Plugin } from 'ckeditor5/src/core';

import { ButtonView } from 'ckeditor5/src/ui';

import imageIcon from 'ckeditor5/src/core/icons/image.svg'; // 或自定义图标

class MyImageUpload extends Plugin {

static get pluginName() { return 'MyImageUpload'; }

static get requires() { return ['ImageUtils']; }

init() {

// 1. Schema 注册

// 注意：若已加载官方 ImageBlock/ImageInline 插件，

// schema 已含 imageBlock/imageInline，此处补充自定义属性即可

const schema = this.editor.model.schema;

schema.extend('imageBlock', { allowAttributes: ['uploadId'] });

schema.extend('imageInline', { allowAttributes: ['uploadId'] });

// 2. 命令注册

this.editor.commands.add(

'insertMyImage',

new InsertImageCommand(this.editor)

);

// 3. 工具栏按钮

this.editor.ui.componentFactory.add('myImageUpload', locale => {

const view = new ButtonView(locale);

view.set({

label: '上传图片',

icon: imageIcon,

tooltip: true

});

view.on('execute', () => this._openFilePicker());

return view;

});

}

_openFilePicker() {

const input = document.createElement('input');

input.type = 'file';

input.accept = 'image/*';

input.onchange = () => {

const file = input.files[0];

if (file) this._upload(file);

};

input.click();

}

async _upload(file) {

const editor = this.editor;

const not