微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

我在 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 举报,一经查实,本站将立刻删除。