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

Question

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

我花了大约两天时间想办法解决这个问题。

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

文件存储库-非上传适配器:未定义上传适配器。阅读更多：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 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;

Answer 2

我认为您对如何配置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'
        }
    } }
/>