CKEditor React - 自定义图像浏览器未打开

Question

我目前正在致力于将 CKEditor 与 React 应用程序中的自定义图像浏览器集成。尽管我做出了努力，单击“插入图像”按钮时，默认图像浏览器仍然打开。

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;

我尝试了各种配置，包括使用 filebrowserImageUploadUrl，但默认的 CKEditor 图像浏览器仍然存在。有没有人遇到过类似的问题或在 CKEditor for React 中成功实现了自定义图像浏览器？任何见解或建议将不胜感激！

Answer 1

我不认为ckeditor5提供自定义图像浏览器。我在ckeditor5文档中没有找到它