上传适配器未定义使用ckeditor5-angular上传图片的问题
发布时间：2020-12-17 17:30:18 所属栏目：安全 来源：网络整理
导读：这个问题可能已经有了答案,但没有一个是Angular特有的. 这里是其中的一些 CKEditor 5 and Image Button How to enable image upload support in CKEditor 5? Insert image to CKeditor 我正在使用Angular 5并遵循this文档来实现ckeditor5-angular. 但我遇到
|
这个问题可能已经有了答案,但没有一个是Angular特有的.
这里是其中的一些 > CKEditor 5 and Image Button 我正在使用Angular 5并遵循this文档来实现ckeditor5-angular. 但我遇到图像上传问题,当我尝试上传图片时,它在浏览器控制台中说.
我已经尝试过搜索这个问题并且能够找到很多解决方案,但实际上我无法理解其中的一个,因为它们不是Angular特有的. 请帮助我如何上传图片. 解决方法
在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 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |