这是我的tinymce.component.ts
import { Component,OnDestroy,AfterViewInit,EventEmitter,Input,Output } from '@angular/core'; @Component({ selector: 'simple-tiny',template: `<textarea id="{{elementId}}"></textarea>` }) export class SimpleTinyComponent implements AfterViewInit,OnDestroy { @input() elementId: String; @Output() onEditorKeyup = new EventEmitter<any>(); editor; ngAfterViewInit() { tinymce.init({ selector: '#' + this.elementId,plugins: ['link','paste','table'],skin_url: 'assets/skins/lightgray',setup: editor => { this.editor = editor; editor.on('keyup',() => { const content = editor.getContent(); this.onEditorKeyup.emit(content); }); },}); } ngOnDestroy() { tinymce.remove(this.editor); } }
现在我正在使用它我的html现在我可以通过keyupHandlerFunction获取文本,但我想要与ngModel 2路绑定
<simple-tiny [elementId]="'my-editor-id'" (onEditorKeyup)="keyupHandlerFunction($event)" > </simple-tiny>
这段代码是tinyMCE建议的,但我想在这里使用ngModel
对于2路绑定我怎么能在这里做
喜欢:
<simple-tiny [elementId]="'my-editor-id'" (onEditorKeyup)="keyupHandlerFunction($event)" [(ngModel)]="value"> </simple-tiny> <p>{{ "My Model" + model}} </p>
解决方法
你应该实现这样的
ControlValueAccessor:
export const TINYMCE_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR,useExisting: forwardRef(() => SimpleTinyComponent),multi: true }; @Component({ selector: 'simple-tiny',template: `<textarea #textArea [value]="value"></textarea>`,providers: [TINYMCE_VALUE_ACCESSOR] }) export class SimpleTinyComponent implements AfterViewInit,ControlValueAccessor { @input() elementId: String; @ViewChild('textArea') textArea: ElementRef; editor: any; value: string; onChange = (_: any) => { }; constructor(private zone: ngzone) {} writeValue(value: any): void { this.value = value; if (this.editor) { this.editor.setContent(value || ''); } } ngAfterViewInit() { tinymce.init({ target: this.textArea.nativeElement,() => { const content = editor.getContent(); this.zone.run(() => this.onChange(content)) }); } }); } registerOnChange(fn: (_: any) => void): void { this.onChange = fn; } registerOnTouched(fn: () => void): void { } ngOnDestroy() { tinymce.remove(this.editor); } }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。