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代码提交表单。

TinyMCE Angular组件在保存时保持刷新页面

1 个答案: