在 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 (将#修改为@）