我按照本指南https://go.tinymce.com/blog/angular-2-and-tinymce/编辑了,但是当我在编辑器中输入任何内容时出现此错误:
" TypeError:_co.keyupHandler不是函数"。
如果我评论这部分..
// editor.on('keyup change', () => {
// const content = editor.getContent();
// this.onEditorContentChange.emit(content);
// });
..然后我没有收到任何错误,但在提交表单时,描述字段不会更新。我有一种感觉这是jquery代码,但我怎么能以角度方式做到这一点?还不确定是否正确注入了formControlName。它适用于app-tiny-editor,但它应该在textarea中吗? 它现在看起来如何:
这一切都非常令人困惑,希望有人可以提供帮助。 代码:
wysiwyg组件ts
import { FormControl } from '@angular/forms';
import { Component, AfterViewInit, EventEmitter, OnDestroy, Input, Output, ViewChild, ElementRef } from '@angular/core';
import 'tinymce';
import 'tinymce/themes/modern';
import 'tinymce/plugins/table';
import 'tinymce/plugins/link';
declare var tinymce: any;
@Component({
selector: 'app-tiny-editor',
template: `<textarea name="{{elementId}}" id="{{elementId}}"></textarea>`,
})
export class TinyEditorComponent implements AfterViewInit, OnDestroy {
@Input() elementId: String;
@Output() onEditorContentChange = new EventEmitter();
@Input() value: any;
@Input() fcn: any;
@Input() control: FormControl;
@ViewChild('textarea') inputRef: ElementRef;
editor: any;
// editor;
ngAfterViewInit() {
tinymce.init({
init_instance_callback: (editor: any) => {
// tslint:disable-next-line:no-unused-expression
editor && this.value && editor.setContent(this.value);
},
selector: '#' + this.elementId,
plugins: ['link', 'table'],
skin_url: '/assets/skins/lightgray',
setup: editor => {
this.editor = editor;
editor.on('keyup change', () => {
const content = editor.getContent();
this.onEditorContentChange.emit(content);
});
}
});
console.log('control',this.control);
}
ngOnDestroy() {
tinymce.remove(this.editor);
}
}
在im中调用它的组件:
<app-tiny-editor [elementId]="'description'" name="description"
[control]="editEvent.controls['description']"
[fcn]="description" formControlName="description"
[value]="theevent.description"
(onEditorContentChange)="keyupHandler($event)" ngDefaultControl>
{{theevent.description}}
</app-tiny-editor>