Javascript 如何使用ReactJS配置CKEditor 5中的上载适配器？

编辑：我在Github上打开了一个问题：

我花了大约两天的时间想弄明白这一点

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

filerepository无上载适配器：未定义上载适配器。阅读 更多：

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

这是我的代码：

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;

---

如何使其工作？

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

下面是CKeditor 5文档中的一个示例。

---

要使其正常工作，您只需添加：

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连接器：

完整代码：

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;

import React，{Component}来自'React'；
从“@CKEditor/ckeditor5 react”导入CKEditor；
从“@ckeditor/ckeditor5 build classic”导入ClassicEditor；
log（ClassicEditor.builtinPlugins.map（plugin=>plugin.pluginName））；
类编辑器组件扩展组件{
建造师（道具）{
超级（道具）；
此.state={
id:props.id，
内容：道具内容，
handlewysiwyinput:props.handlewysiwyinput，
编辑：ClassicEditor
} 
} 
render（）{
返回(
{
//您可以存储“编辑器”，并在需要时使用它。
log（'Editor已准备好使用！'，Editor）；
} }
onChange={（事件，编辑器）=>{
const data=editor.getData（）；
//this.state.handleWYSIWYGInput（this.props.id，数据）；
log（{event，editor，data}）；
console.log（this.state.content）；
} }
onBlur={editor=>{
log（'Blur'，编辑器）；
} }
onFocus={editor=>{
console.log（'Focus'，编辑器）；
} }
/>
);
}
}
导出默认编辑器组件；

那么如何配置上传适配器？你能提供一个例子来解决这个问题吗？你必须像文档中的例子一样添加插件。如何添加插件和删除插件使用文档中的save关键字。但是文档中说官方版本已经包含了插件。我宁愿不做我自己的构建，因为官方的经典编辑器构建已经具备了我所需要的一切。如果我将插件添加到一个现有的构建中，它会给出另一个错误（重复模块），如我的帖子所示。是的，所有可用的构建中都包含图像上传。但是，为了使其工作，您需要配置一个现有的上载适配器或编写自己的适配器。简而言之，upload adapter是一个简单的类，它的作用是将文件发送到服务器（以它想要的任何方式），并在完成后解析返回的承诺。@devamat我发现了一些相关内容，希望这能回答您的问题。

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'
}}}

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;