I want to use tinymce with ng2 smart table in angular app, but struggling to find a way to get data from tinymce to my main component:
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>',
cancelButtonContent: '<i class="nb-close"></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);
}
}
My question is how I can pass the content of editor to onCreate(event) method in AboutComponent, so I could call endpoint to save it to database.