React Js 中的 CKEditor 5 图片上传错误

问题描述

我尝试了官方上传命令，但它不起作用。

这是 CKEditor 部分

<CKEditor
  placeholder="write"
  editor={ClassicEditor}
  data={this.state.body}
  /*  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'
  }}} */                      
  onReady={(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.setState({ body: data });
  }}
/>

插入后，我可以上传图片，但弹出一条消息，内容如下：

控制台显示此错误

访问 XMLHttpRequest 在 'https://example.com/ckfinder/core/connector/PHP/connector.PHP?command=QuickUpload&type=Images&responseType=json' 来源 'http://localhost:3000' 已被 CORS 政策阻止：对预检请求的响应未通过访问控制检查：否请求中存在“Access-Control-Allow-Origin”标头资源。 example.com/ckfinder/core/connector/PHP/connector.PHP?command=QuickUpload&type=Images&responseType=json:1

无法加载资源：net::ERR_Failed

解决方法

看起来您正在尝试将图像上传到 url "https://example.com/...，据我所知，这只是上传配置的默认值，但并不意味着是文件的正确 URL-上传。

根据documentation：

要使用此上传适配器，您必须提供服务器端应用程序将处理上传并与编辑器通信，如以下各节中描述。

这意味着您需要访问服务器端应用程序才能将图像上传到其中。

如果有，您可以按照配置指南 here 将 uploadUrl 设置为正确的地址。
如果您无权访问服务器端应用程序，则需要获取它才能使用上传功能。例如，一个简单的建议可能是 Cloudinary，它是一个软件即服务提供商，可以充当您上传文件的端点。这应该比尝试自己创建服务器应用要容易得多。

ckeditor5 reactjs reactjs reactjs reactjs