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

Question

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

我花了大约 2 天的时间来解决这个问题。

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

filerepository-no-upload-adapter: Upload adapter is not defined. Read more: 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;

如果你在错误中打开 link 它说：

If you see this warning when using one of the CKEditor 5 Builds it means that you did not configure any of the upload adapters available by default in those builds.

See the comprehensive "Image upload overview" to learn which upload adapters are available in the builds and how to configure them.

那么你可以关注这个link：https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/image-upload.html

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

然后你读到这个：

This feature is enabled by default in all builds.

所以我想这个功能存在于所有版本中，但仍然需要 "configured"。我如何在 ReactJS 中执行此操作？

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

ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated. Read more: 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;

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

How to configure the upload adapter in CKEditor 5 with ReactJS?

javascript

image

ckeditor

reactjs