Loading

Angular tinymce-editor 第二次进入组件出现的bug

在Angular 项目中使用Tinymce-editor时 发现出现了一个奇怪的问题,在切换标签后 再次进入组件 发现内容丢失 并且无法编辑,

现记录一下我的解决方案

@Component({
	selector: 'tinymce-editor',
	template: `<editor
		[init]="editParam"
		[(ngModel)]="editorValue"
		(ngModelChange)="editorValueChange($event)"
		[name]="name"
		:key="tagName"
		[id]="tagName"
		*ngIf="loadTinyMce"
		[required]="required"
		[tagName]="getTagName()"
	></editor>`,

  

		this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((event: NavigationEnd) => {
		  
			setTimeout(() => (this.loadTinyMce = false));
			setTimeout(() => (this.loadTinyMce = true));
		});

  原理是组件监听所有进入包含Tinymce的页面后重新初始化一次Tinymce富文本编辑器

posted @ 2021-05-27 18:13  SUBUG  阅读(373)  评论(0)    收藏  举报