我使用froala编辑器进行角度项目。我将上传路径指向我的资产文件但是当ı浏览页面时它说“出错了”我检查了开发人员工具错误,它显示404用于图像路径。
我的ts文件就像这样
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-editor',
templateUrl: './editor.component.html',
styleUrls: ['./editor.component.css']
})
export class EditorComponent implements OnInit {
constructor() { }
public editorContent: string ="";
ngOnInit() {
}
public onClickMe()
{
alert(this.editorContent);
}
public options: Object = {
charCounterCount: true,
// Set the image upload parameter.
imageUploadParam: 'image_param',
// Set the image upload URL.
imageUploadURL: 'assets/upload_image',
// Additional upload params.
imageUploadParams: {id: 'my_editor'},
// Set request type.
imageUploadMethod: 'POST',
// Set max image size to 5MB.
imageMaxSize: 5 * 1024 * 1024,
// Allow to upload PNG and JPG.
imageAllowedTypes: ['jpeg', 'jpg', 'png'],
};
}
出了什么问题?
我这样的html文件
<div [froalaEditor]="options" [(froalaModel)]="editorContent"></div>
<button type="button" class="btn btn-success" (click)="onClickMe()">Kaydet</button>
答案 0 :(得分:5)
尝试替换此对象。
public options: Object = {
charCounterCount: true,
// Set the image upload parameter.
imageUploadParam: 'image_param',
// Set the image upload URL.
imageUploadURL: 'assets/upload_image',
// Additional upload params.
imageUploadParams: {id: 'my_editor'},
// Set request type.
imageUploadMethod: 'POST',
// Set max image size to 5MB.
imageMaxSize: 5 * 1024 * 1024,
// Allow to upload PNG and JPG.
imageAllowedTypes: ['jpeg', 'jpg', 'png'],
events: {
'froalaEditor.initialized': function () {
console.log('initialized');
},
'froalaEditor.image.beforeUpload': function (e, editor, images) {
//Your code
if (images.length) {
// Create a File Reader.
const reader = new FileReader();
// Set the reader to insert images when they are loaded.
reader.onload = (ev) => {
const result = ev.target['result'];
editor.image.insert(result, null, null, editor.image.get());
console.log(ev, editor.image, ev.target['result'])
};
// Read image as base64.
reader.readAsDataURL(images[0]);
}
// Stop default upload chain.
return false;
}
};}