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

Posted 2023-02-22

【中文标题】如何使用 ReactJS 在 CKEditor 5 中配置上传适配器？

【英文标题】：How to configure the upload adapter in CKEditor 5 with ReactJS?

【发布时间】：2019-12-17 05:30:06

【问题描述】：

编辑：我在 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( ... );

我怎样才能让它工作？

【问题讨论】：

我现在也承受着同样的压力......我一辈子都无法理解为什么人们不能直接以简单的方式布置文档。为什么每个新项目都是这样？这绝对令人难以置信......永远不会改变！提供大量示例，让文件上传等常识功能变得简单！

【参考方案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'
        
     
/>

【讨论】：

那么如何配置上传适配器呢？你能举个例子来解决这个问题吗？

您必须将插件添加到其中，就像文档中的示例一样。如何添加插件和删除插件使用文档使用的保存关键字。

但是文档说官方版本已经包含了插件。我宁愿不自己构建，因为官方的经典编辑器构建拥有我所需要的一切。如果我将插件添加到现有构建中，则会出现另一个错误（重复模块），如我的帖子所示。

是的，图片上传包含在所有可用的构建中。但是，为了使其工作，您需要配置现有的上传适配器之一或编写自己的。简而言之，上传适配器是一个简单的类，其作用是将文件发送到服务器（以任何它想要的方式）并在完成后解析返回的承诺。

@devamat 我找到了一些相关的东西，希望这能回答你的问题。 ***.com/questions/46765197/…

【参考方案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;

【讨论】：

这会返回什么？ uploadUrl: 'example.com/ckfinder/core/connector/php/…'