如何在CK编辑器中接收上载图像的URL并将其传递给“ src”属性？

问题描述

使用Base64 image upload adapter，CKEditor显然将图像编码为Base64格式，并将结果插入为<img src="data:image/png;base64,code... >。代码可能很长；我要上传图片网址。

在我的应用程序中，我需要以下功能：

1. 将图像转换为Base64。我知道基本上该怎么做：

async function encodeSingleFileto64base(targetFile: File): Promise<string> {

  const fileReader: FileReader = new FileReader();

  fileReader.readAsDataURL(targetFile);
  
  return new Promise<string>((resolve: (encodedFile: string) => void,reject: (error: Error) => void): void => {
    fileReader.onload = (filedHasBeenReadEvent: ProgressEvent<FileReader>): void => {
      if (filedHasBeenReadEvent.target === null || filedHasBeenReadEvent.target.result === null) {
        reject(new Error("Failed to encode the image file."));
        return;
      }
      resolve(String(filedHasBeenReadEvent.target.result));
    };
  });
}

1. 通过GraphQL提交Base64代码。我基本上可以做到：

import AWSAmplifyAPI,{ graphqlOperation,GraphQLResult } from "@aws-amplify/api";

async function uploadPhotoAndGetURL(photoBase64: string): Promise<string> {
  return (await AWSAmplifyAPI.graphql(graphqlOperation(
    `mutation($photoBase64: String!) { uploadPhoto(photoBase64: $photoBase64) }`,{ photoBase64 }
  ))).uploadPhoto;  
}

1. 进行CK编辑器，将从响应URL接收的内容添加到src=""（这是当前问题的主题）。

这是documentation中的解决方案模板：

class MyUploadAdapter {

  constructor( loader ) {
      this.loader = loader;
  }

  
  upload() {
      return loader.file
          .then( file => server.upload( file ) );
  }

 
  abort() {
      server.abortUpload();
  }
}

第一个问题：如何在upload（）方法中链接两个异步函数？

编码和数据提交都是异步操作。 我一直很困惑如何与loader.file.then()兼容。

第二个问题：如何将收到的URL传递给CK编辑器？

我不能不从建议的解决方案模板中脱颖而出，如何接收上传的图像URL并将其传递给src属性。

解决方法

第一个问题：如何在upload（）方法中链接两个异步函数？

从这里：https://thoughtbot.com/blog/chaining-events-like-a-boss

示例：

const timeUserRequest = async () => {
  const before = await getCurrentTimeAsync()
  await getUserDataViaHttp()
  const after = await getCurrentTimeAsync()

  return (after - before)
};

第二个问题：如何将收到的URL传递给CK编辑器？

您如何提出要求？您看到这个例子了吗？

class MyUploadAdapter {
    // ...

    // Initializes XMLHttpRequest listeners.
    _initListeners( resolve,reject,file ) {
        const xhr = this.xhr;
        const loader = this.loader;
        const genericErrorText = `Couldn't upload file: ${ file.name }.`;

        xhr.addEventListener( 'error',() => reject( genericErrorText ) );
        xhr.addEventListener( 'abort',() => reject() );
        xhr.addEventListener( 'load',() => {
            const response = xhr.response;

            // This example assumes the XHR server's "response" object will come with
            // an "error" which has its own "message" that can be passed to reject()
            // in the upload promise.
            //
            // Your integration may handle upload errors in a different way so make sure
            // it is done properly. The reject() function must be called when the upload fails.
            if ( !response || response.error ) {
                return reject( response && response.error ? response.error.message : genericErrorText );
            }

            // If the upload is successful,resolve the upload promise with an object containing
            // at least the "default" URL,pointing to the image on the server.
            // This URL will be used to display the image in the content. Learn more in the
            // UploadAdapter#upload documentation.
            resolve( {
                default: response.url
            } );
        } );

        // Upload progress when it is supported. The file loader has the #uploadTotal and #uploaded
        // properties which are used e.g. to display the upload progress bar in the editor
        // user interface.
        if ( xhr.upload ) {
            xhr.upload.addEventListener( 'progress',evt => {
                if ( evt.lengthComputable ) {
                    loader.uploadTotal = evt.total;
                    loader.uploaded = evt.loaded;
                }
            } );
        }
    }
}