CKEditor5 React 自定义图片上传适配器不接受解析的 url

编程问答 2022-04-23

问题描述

我在 React 中使用 ckeditor5 经典编辑器。我正在尝试实现自定义图像上传适配器。我已成功将图像上传到本地服务器并以 {"url" : "http://localhost:xxxxx/Resources/image.jpg"} 格式获取 url。但不知何故解析的 url 不被接受，或者可能在解析之前出错，我不知道。

未捕获（承诺）类型错误：无法读取属性 'urls' 不明确的 在 Wg.on.priority (ckeditor.js:5) 在 Wg.fire (ckeditor.js:5) 在 Object.callback (ckeditor.js:5) 在 ml._runPendingChanges (ckeditor.js:5) 在 ml.enqueueChange (ckeditor.js:5) 在 ckeditor.js:5。

import { API } from "../config";
class MyUploadAdapter {
  constructor(loader) {
    this.loader = loader;
  }

  uploadFile(file,url) {
    let formData = new FormData();
    formData.append("attachment",file);
    return fetch(url,{
      method: "POST",headers: {
        Accept: "application/json",},body: formData,});
  }

  upload() {
    let upload = new Promise((resolve,reject) => {
      this.loader.file.then((data) =>
        this.uploadFile(data,`${API}file/upload`).then((d) => {
          this.loader.uploaded = true;
          d.json().then((e) => {
            if (e) {
              resolve({
                default: e.url,});
            } else {
              reject("Could not upload file");
            }
          });
        })
      );
    });
  }
}

export default function MyCustomUploadAdapterPlugin(editor) {
  editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
    return new MyUploadAdapter(loader);
  };
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ckeditor5reactjsreactjsreactjsreactjs