TinyMCE Angular component keeps refreshing page on save

Question

I'm trying to setup the Angular TinyMCE component in a form and use the save plugin so the user can use ctrl/cmd + S and the save button to save and submit the form.

But the problem is the page always gets refreshed on save. I've tried adding event.preventDefault() but that doesn't keep it from refreshing either.

Here's a small codebox 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;
  }

}

Michael Fromin Michael Fromin · Accepted Answer · 2019-08-26T16:32:36

I believe that the TinyMCE Save plugin is using a standard form submission which would result in the page being reloaded.

If you want to rely on your Angular application's save code you could create a custom shortcut for that keystroke that triggers your JavaScript code for form submission.

TinyMCE Angular component keeps refreshing page on save

1 Answers