如何解决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-上传。
要使用此上传适配器,您必须提供服务器端应用程序 将处理上传并与编辑器通信,如 以下各节中描述。
这意味着您需要访问服务器端应用程序才能将图像上传到其中。
如果有,您可以按照配置指南 here 将 uploadUrl
设置为正确的地址。
如果您无权访问服务器端应用程序,则需要获取它才能使用上传功能。例如,一个简单的建议可能是 Cloudinary,它是一个软件即服务提供商,可以充当您上传文件的端点。这应该比尝试自己创建服务器应用要容易得多。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。