angular2 wysiwyg tinymce实现和双向绑定

Question

嗨我想实现tinymce到角2组件为一个小论坛创建一个新的线程。 我希望将textarea（tinymce）的内容绑定到组件内部的变量上。到目前为止提交按钮的作品，但关键事件不。

export class ForumNewThreadComponent implements OnInit{ 

    constructor(){} 
    ngOnInit():any { 
    tinymce.init(
     { 
     selector: ".tinyMCE", 
     }) 
    } 

text:string; 
    submit(){ 
    this.text = tinymce.activeEditor.getContent(); 
    } 
    getTinymceContent(){ 
    this.text = tinymce.activeEditor.getContent(); 
    } 
} 

，并查看

<div class="thread-body"> 
    {{getValue}} 
    <textarea class="tinyMCE" style="height:300px" (keyup)="getTinymceContent()"> 

    </textarea> 
    <button class="btn btn-primary" (click)="submit()">Submit</button> 
    </div> 

Answer 1

我会实现这个自定义值访问：

const TINY_MCE_VALUE_ACCESSOR = new Provider(
    NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => TinyMceValueAccessor), multi: true}); 

@Directive({ 
    selector: 'textarea[tinymce]', 
    host: { '(keyup)': 'doOnChange($event.target)' }, 
    providers: [ TINY_MCE_VALUE_ACCESSOR ] 
}) 
export class DateValueAccessor extends DefaultValueAccessor { 
    @Input() 
    tinymce:any; 

    onChange = (_) => {}; 
    onTouched =() => {}; 

    writeValue(value:any):void { 
    if (value!=null) { 
     super.writeValue(value.toString()); 
    } 
    } 

    doOnChange(elt) { 
    this.onChange(this.tinymce.activeEditor.getContent()); 
    } 
} 

我会用这种方式：

<textarea [tinymce]="tinymce" style="height:300px" [(ngModel)]="text"> 

</textarea> 

，并在您组件类：

@Component({ 
    (...) 
    directives: [ DateValueAccessor ] 
}) 
export class ForumNewThreadComponent implements OnInit{ 
    constructor(){} 
    ngOnInit():any { 
    tinymce.init({ 
     selector: "[tinymce]" 
    }) 
    } 

    text:string; 
} 

Answer 2

或者像这样做，使用TMCE的变化事件和NgZone

constructor(public zone:NgZone) {} 

ngOnInit():any { 
    tinymce.init(
     { 
     selector: ".tinyMCE", 
     setup: (ed) => { 
      ed.on('keyup change', (ed, l) => { 
      this.zone.run(()=> { 
       this.text = tinymce.activeEditor.getContent(); 
      }); 
      }); 

     } 
     }) 
    } 

，一旦你在一个组件有TMCE多个实例这将失败。 把这个逻辑放在像Thierry实现的指令中。

Answer 3

我知道这是一个有点旧的帖子。但过了两天就挠了脑袋。我终于明白了这一点，并认为这可能对其他人有用。所以，分享在这里

https://github.com/Abhijith-Nagaraja/tinymce-docs/blob/master/integrations/angular2.md#sample-directive-implementation-with-ngmodel-two-way-binding

Answer 4

我今天想说我做了相同的实现如上所述，但我遇到这个奇怪的错误来了，一圈又一圈，拍着我的头固定的'cannot modify NodeName of Null'这个错误，所以最后我修复了错误，我想分享它，所以人们不必再搜索它的错误可能是什么。我知道这是一个老职位，我对此表示歉意。

1. 得到github（指令）的代码。下方链接。 谢谢@Ahhijith Nagaraja的帖子。

https://github.com/Abhijith-Nagaraja/tinymce-docs/blob/master/integrations/angular2.md#sample-directive-implementation-with-ngmodel-two-way-binding

2。 添加两个变量指令

private editor; 
private init: boolean = false; 

重写方法ValueOnChange(change: boolean) this.val = tinymce.activeEditor.getContent();

writeValue(value: any): void { 
    // ... 
} 

到

writeValue(value: any): void { 
    // This check is necessary because, this method gets called before editor gets initialised. 
    // Hence undefined/null pointer exceptions gets thrown 
    if (this.init) { 
     if (tinymce.get(this.selector)) { 
     tinymce.get(this.selector).setContent(value, {format: 'raw'}); 
     } 
    } 
} 

更换到

if (tinymce.activeEditor) {   
    this.val = tinymce.activeEditor.getContent(); 
} 

重写tinymce.init(options)

到

tinymce.init(options).then(() => { 
    this.init = true; 
}); 

和最后添加ngOnDestroy方法

ngOnDestroy() { 
    tinymce.remove(this.editor); 
} 

这有固定的错误，我也定了我，当编辑已经初始化和我已经重用它，它不会编译。但现在因为ngOnDestroy的我现在能破坏编辑器和afterViewInit都会想起tinymce.init