如何解决在 Angular 应用程序的 ng2-smart-table 中使用 tinymce 编辑器?
我想在 angular 应用程序中使用 tinymce 和 ng2 智能表,但正在努力寻找一种方法将数据从 tinymce 获取到我的主要组件:
about.component.html :
<nb-card>
<nb-card-header>
Supply
</nb-card-header>
<nb-card-body>
<ng2-smart-table [settings]="settings" [source]="source"
(createConfirm)="onCreate($event)"
(editConfirm)="onEdit($event)"
(deleteConfirm)="onDeleteConfirm($event)">
</ng2-smart-table>
</nb-card-body>
</nb-card>
about.component.ts:
export class AboutComponent implements OnInit {
source: LocalDataSource = new LocalDataSource();
constructor(private service: SupplyService) {
}
ngOnInit(): void { }
settings = {
add: {
addButtonContent: '<i class="nb-plus"></i>',createButtonContent: '<i class="nb-checkmark"></i>',cancelButtonContent: '<i class="nb-close"></i>',confirmCreate: true,},edit: {
editButtonContent: '<i class="nb-edit"></i>',saveButtonContent: '<i class="nb-checkmark"></i>',confirmSave: true,delete: {
deleteButtonContent: '<i class="nb-trash"></i>',confirmDelete: true,columns: {
id: {
title: 'ID',type: 'number',editable: false,text: {
title: 'Image',type: 'html',editor: {
type: 'custom',component: MceComponent,valuePrepareFunction: (x) => {
return `"${x}"`;
}
},};
onDeleteConfirm(event): void {
console.log("delete pressed");
}
onEdit(event): void {
console.log("edit")
}
onCreate(event): void {
console.log(event)
}
}
MceComponent:
@Component({
selector: 'ngx-mce',template: ``,styleUrls: ['./mce.component.scss']
})
export class MceComponent extends DefaultEditor implements AfterViewInit,OnInit,ControlValueAccessor {
@Input() elementId: String;
@ViewChild('textArea') textArea: ElementRef;
editor: any;
value: string;
onChange = (_: any) => { };
registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
registerOnTouched(fn: () => void): void { }
@Output() editorKeyup = new EventEmitter<any>();
constructor(
private host: ElementRef,private locationStrategy: LocationStrategy,) {
super()
}
ngOnInit(): void {
}
writeValue(value: any): void {
this.value = value;
if (this.editor) {
this.editor.setContent(value || '');
}
}
setDisabledState?(isDisabled: boolean): void {
console.log("setDisabledState")
}
ngAfterViewInit() {
tinymce.init({
target: this.host.nativeElement,plugins: ['link','paste','table'],skin_url: `${this.locationStrategy.getBaseHref()}assets/skins/lightgray`,setup: editor => {
this.editor = editor;
editor.on('keyup',() => {
this.editorKeyup.emit(editor.getContent());
});
},height: '320',});
}
ngOnDestroy() {
tinymce.remove(this.editor);
}
}
我的问题是如何将编辑器的内容传递给 AboutComponent 中的 onCreate(event) 方法,以便我可以调用端点将其保存到数据库中。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。