TinyMCE Angular組件在保存時保持刷新頁面

Question

我正在嘗試在表單中設置Angular TinyMCE組件並使用保存插件，以便用戶可以使用ctrl / cmd + S和保存按鈕來保存和提交表單。

但是問題是頁面總是在保存時刷新。 我試過添加event.preventDefault()但這並不能阻止它刷新。

這是一個小代碼框https://codesandbox.io/embed/tinymceangular-5thjg

<form #editorForm="ngForm" (ngSubmit)="onSubmit()" novalidate id="editorForm" submit="return false;">
  <button type="submit" mat-raised-button color="primary" name="submitbtn">Save Changes</button>
  <editor
    [(ngModel)]="editor" name="editor"
    (onSaveContent)="$event.event.preventDefault();false;"
    [init]="{
    plugins: 'media table contextmenu  save',
    toolbar: 'save',
    branding: false
  }"></editor>
</form>

---

@Component({
  selector: 'app-table-editor',
  templateUrl: './table-editor.component.html',
  styleUrls: ['./table-editor.component.scss']
})
export class TableEditorComponent implements OnInit {
  @Input() tableId: number;
  editor: string;
  @ViewChild('editorForm') editorForm: NgForm;

  constructor(private fb: FormBuilder,
              private tableService: DataTableService) { }

  ngOnInit() {
    this.tableService.getActiveTableDocumentation(this.tableId)
      .subscribe((documentation: DocumentationContent) => {
        this.editor = documentation.content;
      });
    this.listenForSaveEvent();
  }
  listenForSaveEvent() {
    this.editorForm.statusChanges.subscribe(change => console.log(change));
    this.editorForm.valueChanges.subscribe(change => console.log(change));
  }

  saveEvent(evt: Event) {
    evt.preventDefault();
    console.log('saving');
  }
  onSubmit(): boolean {
    console.log(this.editorForm);
    return false;
  }

}

Answer 1

我相信TinyMCE Save插件正在使用標准的表單提交方式，這將導致頁面被重新加載。

如果您要依賴Angular應用程序的保存代碼，則可以為該擊鍵創建一個自定義快捷方式，該快捷方式將觸發您的JavaScript代碼以提交表單。