这个问题可能已经有了答案,但没有一个是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: Upload adapter is not defined. Read more: 07004
解决方法
在component.html文件中添加以下代码
<ckeditor [editor]="Editor" (ready)="onReady($event)"></ckeditor>
在component.ts文件中创建onReady(数据)函数
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;
}
}
这里默认表示上传的图片网址.我已经在base64中转换了文件但您可以调用服务器URL并上传您的文件,然后使用相同的密钥返回服务器URL.
EnjOy CodInG
