未定义上传适配器 ckeditor5-angular 中的图像上传问题

Posted 2023-02-16

【中文标题】未定义上传适配器 ckeditor5-angular 中的图像上传问题

【英文标题】：Upload adapter is not defined Issue with Image uploading in ckeditor5-angular

【发布时间】：2019-02-02 18:30:29

【问题描述】：

这个问题可能已经有了答案，但没有一个是 Angular 特有的。 以下是其中的一些

CKEditor 5 and Image Button How to enable image upload support in CKEditor 5? Insert image to CKeditor

我正在使用 Angular 5 并遵循 this 文档来实现 ckeditor5-angular。

但是我在上传图片时遇到问题，当我尝试上传图片时，它会在浏览器控制台中显示。

filerepository-no-upload-adapter：上传适配器未定义。阅读更多：https://docs.ckeditor.com/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter

我已经尝试搜索这个问题并且能够找到很多解决方案，但实际上我无法理解其中的一个，因为它们不是 Angular 特定的。

请帮助我如何上传图片。

【参考方案1】：

在component.html文件中添加以下代码

<ckeditor [editor]="Editor" (ready)="onReady($event)"></ckeditor>

在component.ts文件创建函数onReady(data)

onReady(eventData) 
    eventData.plugins.get('FileRepository').createUploadAdapter = function (loader) 
      console.log(btoa(loader.file));
      return new UploadAdapter(loader);
    ;
  

添加名为UploadAdapter 的新类并添加以下代码：-

export class UploadAdapter 
  private loader;
  constructor(loader: any) 
    this.loader = loader;
    console.log(this.readThis(loader.file));
  

  public upload(): Promise<any> 
    //"data:image/png;base64,"+ btoa(binaryString) 
    return this.readThis(this.loader.file);
  

  readThis(file: File): Promise<any> 
    console.log(file)
    let imagePromise: Promise<any> = new Promise((resolve, reject) => 
      var myReader: FileReader = new FileReader();
      myReader.onloadend = (e) => 
        let image = myReader.result;
        console.log(image);
        return  default: "data:image/png;base64," + image ;
        resolve();
      
      myReader.readAsDataURL(file);
    );
    return imagePromise;
  

这里default表示上传图片的url。我已经在 base64 中转换了文件，但是您可以调用服务器 url 并上传您的文件，然后返回具有相同密钥的服务器 url。

享受编码:)

【参考方案2】：

我用下面的似乎可以工作

class UploadAdapter 
   constructor( loader ) 
      this.loader = loader;
   

   upload() 
      return this.loader.file
            .then( file => new Promise( ( resolve, reject ) => 
                  var myReader= new FileReader();
                  myReader.onloadend = (e) => 
                     resolve( default: myReader.result );
                  

                  myReader.readAsDataURL(file);
             ) );
   ;

【参考方案3】：

我试图使用zackhalil's solution。图像显示在编辑器中，但是当我得到更新数据库的值时，我只有：

<figure class="image"><img></figure>

为了解决这个问题，我更改了以下代码：

return  default: "data:image/png;base64," + image ;
resolve();

到：

resolve( default: image );

【参考方案4】：

我通过实现自己的UploadAdapter解决了这个问题 如果你使用Editor.create()，那将创建一个新的编辑器元素，而不是与角度组件相关联

<ckeditor 
[editor]="Editor" 
[(ngModel)]="content"
(ready)="onReady($event)"
>
</ckeditor>

在 component.ts

  onReady($event)
    $event.plugins.get('FileRepository').createUploadAdapter = (loader)=> 
      return new UploadAdapter(loader,'',this.http);
    ;
  

UploadAdapter.ts

import  HttpParams, HttpClient  from "@angular/common/http";

export class UploadAdapter 
    constructor(
      private loader,
      public url:string,
      private http:HttpClient
      ) 
    
//the uploadFile method use to upload image to your server
  uploadFile(file,url?:string,user?:string)
    let name = '';
    url='your api';
    let formData:FormData = new FormData();
    let headers = new Headers();
    name = file.name;
    formData.append('attachment', file, name);
    const dotIndex = name.lastIndexOf('.');
    const fileName  = dotIndex>0?name.substring(0,dotIndex):name;
    formData.append('name', fileName);
    formData.append('source', user);

    headers.append('Content-Type', 'multipart/form-data');
    headers.append('Accept', 'application/json');
    console.log('formData',formData);
    let params = new HttpParams();
    const options = 
        params: params,
        reportProgress: true,
    ;
//http post return an observer
//so I need to convert to Promise
    return this.http.post(url,formData,options);
  
//implement the upload 
  upload() 
      let upload = new Promise((resolve, reject)=>
        this.loader['file'].then(
            (data)=>
                this.uploadFile(data,this.url,'test')
                .subscribe(
                    (result)=>
//resolve data formate must like this
//if **default** is missing, you will get an error
                        **resolve( default: result['attachment'] )**
                    ,
                    (error)=>
                        reject(data.msg);
                    
                );
            
        );
      );
      return upload;
  
  abort() 
      console.log("abort")
  

【讨论】：

我收到错误表达式预期 resolve( default: result['attachment'] )

result['attachment'] 是我后端api返回的数据格式，你可以改成你的api返回的相关数据格式

【参考方案5】：

谢谢大家的回答。我为任何想要查看示例的人创建代码 sn-p。但我使用 ckeditor 内联构建。希望对您有所帮助。

stackblitz