CKEditor React - Custom Image Browser Not Opening

Question

I'm currently working on integrating CKEditor with a custom image browser in a React application. Despite my efforts, the default image browser continues to open when clicking the "Insert Image" button.

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;

I've tried various configurations, including using filebrowserImageUploadUrl, but the default CKEditor image browser persists. Has anyone experienced a similar issue or successfully implemented a custom image browser in CKEditor for React? Any insights or suggestions would be greatly appreciated!

Answer 1

i don't think ckeditor5 provides custom image browser. i haven't found it in ckeditor5 docs