CKEditor React自定义图片浏览器无法触发，默认弹窗仍弹出求助

在React应用中集成CKEditor并配置自定义图片浏览器时，点击「插入图片」按钮始终弹出默认图片浏览器，尝试设置filebrowserImageUploadUrl等多种配置后问题仍未解决，代码实现如下：

import React, { useState } from "react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import {
  BASE_URL,
  FileManagerCommand,
} from "../../../../utils/constants";
import { useSelector } from "react-redux";

// ... (rest of the code)

function RichTextEditorUI({ value, onChange }) {
  const { token } = useSelector((state) => state.auth);
  const [showImageBrowser, setShowImageBrowser] = useState(false);

  function openCustomImageBrowser() {
    console.log("Open Custom Image Browser");
    setShowImageBrowser(true);
  }

  function closeCustomImageBrowser() {
    setShowImageBrowser(false);
  }

  function selectImage(imageUrl) {
    console.log('Selected Image:', imageUrl);
    // Handle the selected image URL and insert it into the editor if needed
    // You can use CKEditor API methods for this purpose.
  }

  function uploadAdapter(loader) {
    return {
      upload: () => {
        // Your image upload logic here
        // For demonstration purposes, resolve with a placeholder URL
        return Promise.resolve({
          default: 'https://example.com/placeholder.jpg',
        });
      },
    };
  }

  function uploadPlugin(editor) {
    editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
      return uploadAdapter(loader);
    };
  }

  return (
    <div>
      <CKEditor
        editor={ClassicEditor}
        data={value}
        config={{
          toolbar: [
            'heading',
            '|', 'bold', 'italic',
            '|', 'link', 'customImageBrowser', 'insertTable',
            '|', 'bulletedList', 'numberedList',
          ],
          extraPlugins: [uploadPlugin],
          filebrowserImageBrowseUrl: "/path/to/your/custom/image/browser",
          filebrowserBrowseUrl: "/path/to/your/custom/file/browser",
          filebrowserUploadUrl: `${BASE_URL}/assets/file-manager`,
          filebrowserUploadMethod: FileManagerCommand.POST,
          filebrowserImageUploadMethod: FileManagerCommand.POST,
          customImageBrowser: {
            label: 'Custom Image Browser',
            command: 'customImageBrowserCommand',
            toolbar: 'insert',
          },
        }}
        onReady={(editor) => {
          editor.commands.add('customImageBrowserCommand', {
            exec: () => openCustomImageBrowser(),
          });
        }}
        onChange={(event, editor) => {
          const data = editor.getData();
          onChange(data);
          console.log(data);
        }}
      />

      {showImageBrowser && (
        <CustomImageBrowser
          onClose={closeCustomImageBrowser}
          onSelectImage={selectImage}
        />
      )}
    </div>
  );
}

export default RichTextEditorUI;

解决建议： #

• 移除默认图片按钮，避免触发原生弹窗
  CKEditor 5默认工具栏包含imageInsert按钮，你当前的配置仅添加了自定义按钮，但未移除原生按钮，点击原生按钮仍会弹出默认浏览器。需在toolbar配置中明确移除imageInsert，确保只保留customImageBrowser。

• 修正自定义按钮的注册方式
  直接在config里定义customImageBrowser的方式不生效，CKEditor 5需要通过ui.componentFactory手动注册自定义按钮。修改onReady逻辑：

  import { ButtonView } from '@ckeditor/ckeditor5-ui'; // 需导入ButtonView
  
  // ...
  
  onReady={(editor) => {
    // 注册自定义命令
    editor.commands.add('customImageBrowserCommand', {
      exec: () => openCustomImageBrowser(),
    });
    // 注册自定义按钮到UI组件工厂
    editor.ui.componentFactory.add('customImageBrowser', (locale) => {
      const button = new ButtonView(locale);
      button.set({
        label: '插入图片',
        icon: '<svg>这里可以放自定义图标SVG代码</svg>', // 或使用CKEditor内置图标
        tooltip: true
      });
      // 绑定按钮点击到命令执行
      button.on('execute', () => {
        editor.execute('customImageBrowserCommand');
      });
      return button;
    });
  }}
  

• 实现图片插入的核心逻辑
  选中图片后需要通过CKEditor的Model API插入内容，先保存编辑器实例，再修改selectImage函数：

  const [editorInstance, setEditorInstance] = useState(null);
  
  // 在onReady中保存实例
  onReady={(editor) => {
    setEditorInstance(editor);
    // ...其他注册逻辑
  }}
  
  function selectImage(imageUrl) {
    if (!editorInstance) return;
    // 使用CKEditor Model API插入图片
    editorInstance.model.change(writer => {
      const imageElement = writer.createElement('image', {
        src: imageUrl,
        alt: '自定义图片描述'
      });
      // 插入到当前光标位置
      editorInstance.model.insertContent(imageElement, editorInstance.model.document.selection);
    });
    closeCustomImageBrowser();
  }
  

• 移除无效配置项
  filebrowserImageBrowseUrl、filebrowserUploadUrl等是CKEditor 4的配置，CKEditor 5完全不支持这些选项，直接删除即可，避免混淆。

内容的提问来源于stack exchange，提问作者Tarun SR