Using tinymce editor inside ng2-smart-table in Angular app?

Question

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.

Answer 1

等待大神答复