如何使用 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 Builds 之一时看到此警告 表示您没有配置任何可用的上传适配器 默认情况下在这些版本中。

查看全面的“图片上传概述”以了解哪些上传 适配器在构建中可用以及如何配置它们。

那么你可以点击这个链接：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

我认为您对如何在 React 中配置 ckeditor 设置感到困惑。大多数人是我刚开始的时候，但是要在 ckeditor 中为反应组件进行配置，你必须像这样遵循它。我 React 它将 config 作为一个对象，它在内部接受另一个对象，这就是我们添加和删除插件的方式。

这是 CKeditor 5 文档中的一个示例。 https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html#using-ckeditor-5-source

<CKEditor
    data="<p>Editor' content</p>"
    config={ {
        plugins: [ CKFinder, ... ],
        toolbar: [ 'imageUpload', ... ],
        ckfinder: {
            uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
        }
    } }
/>

Answer 2

为了让它工作，你应该只添加：

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;