Question

该问题可能已经答案，但是它们都不是Angular特有的。这里有一些

我正在使用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的。

请帮助我如何上传图片。

Answer 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表示上传的图片网址。我已经在base64中转换了文件，但是您可以调用服务器url并上传文件，然后使用相同的键返回服务器url。

EnjOy CodInG：）

Answer 2

我通过实现自己的<div class="itemlist"> ... ... ... ... ... ... </div>
解决了这个问题如果您使用UploadAdapter，将创建一个新的编辑器元素，而不与角度分量相关联

Editor.create()

在component.ts

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

UploadAdapter.ts

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

Answer 3

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

stackblitz

Answer 4

我用下面的方法似乎有效

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);
            } ) );
   };
}

Answer 5

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

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

要解决此问题，我更改了以下代码：

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

收件人：

resolve({ default: image });

未定义上载适配器ckeditor5-angular

5 个答案: