如何使用 ReactJS 在 CKEditor 5 中配置上传适配器？

Question

编辑：我在 Github 上打开了一个问题：https : //github.com/ckeditor/ckeditor5-editor-classic/issues/98

我花了大约 2 天的时间试图弄清楚这一点。

编辑器工作正常，但是当我尝试添加图像时出现错误：

filerepository-no-upload-adapter：未定义上传适配器。阅读更多：https : //ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter

我浏览了几个小时的文档，但我找不到解决方案。您可以在我尝试遵循的文档中看到以下步骤。

这是我的代码：

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

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}
                    onInit={ editor => {
                        // You can store the "editor" and use when it is needed.
                        console.log( 'Editor is ready to use!', editor );
                    } }
                    onChange={ ( event, editor ) => {
                        const data = editor.getData();
                        //this.state.handleWYSIWYGInput(this.props.id, data);
                        console.log( { event, editor, data } );
                        console.log(this.state.content);
                    } }
                    onBlur={ editor => {
                        console.log( 'Blur.', editor );
                    } }
                    onFocus={ editor => {
                        console.log( 'Focus.', editor );
                    } }
                />
            </div>
        );
    }
}

export default EditorComponent;

如果您打开错误中的链接，它会显示：

如果您在使用 CKEditor 5 构建版本之一时看到此警告，则意味着您没有配置这些构建中默认可用的任何上传适配器。

请参阅全面的“图像上传概述”以了解构建中可用的上传适配器以及如何配置它们。

然后你可以点击这个链接：https : //ckeditor.com/docs/ckeditor5/latest/features/image-upload/image-upload.html

这将为您提供一些配置上传适配器的选项。我想使用 CKFinder，因此：https ://ckeditor.com/docs/ckeditor5/latest/features/image-upload/ckfinder.html

然后你读到这个：

默认情况下，此功能在所有构建中启用。

所以我认为该功能存在于所有版本中，但仍需要“配置”。我如何在 ReactJS 中做到这一点？

我试图实现页面中链接的代码，但语法在 ReactJS 中不起作用，无论如何添加import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';会产生另一个错误：

ckeditor-duplicated-modules：一些 CKEditor 5 模块是重复的。阅读更多：https : //ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules

文档页面中的代码：

import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ CKFinder, ... ],

        // Enable the "Insert image" button in the toolbar.
        toolbar: [ 'imageUpload', ... ],

        ckfinder: {
            // Upload the images to the server using the CKFinder QuickUpload command.
            uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
        }
    } )
    .then( ... )
    .catch( ... );

我怎样才能让它工作？

Answer 1

为了使其工作，您应该只添加：

config={{ckfinder: {
    // Upload the images to the server using the CKFinder QuickUpload command
    // You have to change this address to your server that has the ckfinder php connector
    uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
}}}

添加这部分代码将停止显示上传适配器错误。在您设置服务器端之前，这不会上传图片。您可以按照以下说明安装 php 连接器：https://ckeditor.com/docs/ckfinder/ckfinder3-php/quickstart.html

完整代码：

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

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}
                    config={{ckfinder: {
                      // Upload the images to the server using the CKFinder QuickUpload command.
                      uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
                    }}}
                    onInit={ editor => {
                        // You can store the "editor" and use when it is needed.
                        console.log( 'Editor is ready to use!', editor );
                    } }
                    onChange={ ( event, editor ) => {
                        const data = editor.getData();
                        //this.state.handleWYSIWYGInput(this.props.id, data);
                        console.log( { event, editor, data } );
                        console.log(this.state.content);
                    } }
                    onBlur={ editor => {
                        console.log( 'Blur.', editor );
                    } }
                    onFocus={ editor => {
                        console.log( 'Focus.', editor );
                    } }
                />
            </div>
        );
    }
}

export default EditorComponent;