[英]TinyMCE Angular component keeps refreshing page on save
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. 我正在尝试在表单中设置Angular TinyMCE组件并使用保存插件,以便用户可以使用ctrl / cmd + S和保存按钮来保存和提交表单。
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. 我试过添加
event.preventDefault()
但这并不能阻止它刷新。
Here's a small codebox https://codesandbox.io/embed/tinymceangular-5thjg 这是一个小代码框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;
}
}
I believe that the TinyMCE Save plugin is using a standard form submission which would result in the page being reloaded. 我相信TinyMCE Save插件正在使用标准的表单提交方式,这将导致页面被重新加载。
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. 如果您要依赖Angular应用程序的保存代码,则可以为该击键创建一个自定义快捷方式,该快捷方式将触发您的JavaScript代码以提交表单。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.