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