如何在ReactJS中配置CKEditor 5上传适配器并解决相关报错？

Let's work through your issue step by step—first, let's break down why those errors are popping up:

Why You're Seeing These Issues #

1. filerepository-no-upload-adapter: The classic build of CKEditor 5 does include the CKFinder plugin, but it won't work without explicit configuration. Without setting an upload URL, the editor doesn't know where to send your images.
2. ckeditor-duplicated-modules: You tried importing the CKFinder source module directly, but the classic build already bundles this plugin internally. Adding a separate import creates duplicate module instances, which CKEditor blocks to prevent conflicts.

The Correct Way to Configure CKFinder in React #

You don't need to import CKFinder separately—just pass the CKFinder configuration directly to the CKEditor component via the config prop. Here's how to adjust your code:

Modified React Component Code #

import React, { Component } from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

// Confirm CKFinder is included in the built-in plugins
console.log(ClassicEditor.builtinPlugins.map(plugin => plugin.pluginName));

class EditorComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: props.id,
      content: props.content,
      handleWYSIWYGInput: props.handleWYSIWYGInput,
      editor: ClassicEditor
    }
  }

  render() {
    return (
      <div className="Editor-content">
        <CKEditor
          editor={this.state.editor}
          data={this.state.content}
          // Add CKFinder configuration here
          config={{
            // Ensure the image upload button is in the toolbar
            toolbar: ['imageUpload', ...ClassicEditor.defaultConfig.toolbar],
            ckfinder: {
              // Replace this with your actual CKFinder QuickUpload endpoint
              uploadUrl: 'https://your-server-endpoint/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
            }
          }}
          onInit={editor => {
            console.log('Editor is ready to use!', editor);
          }}
          onChange={(event, editor) => {
            const data = editor.getData();
            console.log({ event, editor, data });
            console.log(this.state.content);
            // Uncomment this when ready to pass content up to parent component
            // this.state.handleWYSIWYGInput(this.props.id, data);
          }}
          onBlur={editor => {
            console.log('Blur.', editor);
          }}
          onFocus={editor => {
            console.log('Focus.', editor);
          }}
        />
      </div>
    );
  }
}

export default EditorComponent;

Key Tips to Keep in Mind #

• Confirm CKFinder is bundled: The console.log of built-in plugins should show "CKFinder" in the list—this confirms the classic build includes it by default.
• Validate your upload URL: Make sure your backend endpoint is set up to handle CKFinder's QuickUpload requests. It needs to return a valid JSON response with the uploaded image's URL.
• Custom builds for advanced needs: If you ever want to add/remove plugins beyond the classic build, use CKEditor's online builder to create a custom build instead of importing source modules directly—this avoids duplicate module errors entirely.

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