angular2 wysiwyg thực hiện tinymce và 2 chiều-ràng buộc

Question

Xin chào Tôi đang cố gắng thực hiện tinymce thành một thành phần góc 2 cho một diễn đàn nhỏ để tạo ra một chủ đề mới. Tôi muốn nội dung của textarea (tinymce) được gắn 2 chiều với một biến bên trong thành phần. Cho đến nay nút gửi hoạt động nhưng sự kiện không hoạt động.

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(); 
    } 
} 

và xem

<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

tôi sẽ thực hiện một accessor giá trị tùy chỉnh cho việc này:

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()); 
    } 
} 

tôi sẽ sử dụng nó theo cách này:

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

</textarea> 

và trong bạn lớp thành phần:

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

    text:string; 
} 

Answer 2

Hoặc làm điều đó như thế này, sử dụng sự kiện thay đổi tmce và 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(); 
      }); 
      }); 

     } 
     }) 
    } 

này sẽ thất bại khi bạn có nhiều hơn một ví dụ về tmce trong một thành phần. Đặt logic này trong một chỉ thị như triển khai của Thierry.

Answer 3

Tôi biết đây là một bài đăng cũ. Nhưng sau khi gãi đầu trong hơn 2 ngày. Cuối cùng tôi đã có thể hình dung ra điều này và nghĩ rằng điều này có thể hữu ích cho người khác. Vì vậy, chia sẻ nó ở đây

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

Answer 4

tôi muốn nói rằng tôi đã thực hiện tương tự như đã nêu ở trên, nhưng tôi tình cờ gặp lỗi lạ này và đập đầu tôi xung quanh và xung quanh sửa chữa lỗi này của 'cannot modify NodeName of Null', vì vậy cuối cùng hôm nay tôi đã sửa lỗi và tôi muốn chia sẻ nó, vì vậy mọi người sẽ không phải tìm kiếm nó nữa vì lỗi có thể là gì. Tôi biết đây là một bài cũ tôi xin lỗi vì điều đó.

1. lấy mã của github (chỉ thị). đường dẫn phía dưới. thankyou @Abhijith Nagaraja cho bài đăng.

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

2. thêm hai biến để chỉ thị

private editor; 
private init: boolean = false; 

viết lại phương pháp

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'}); 
     } 
    } 
} 

thay thế trong ValueOnChange(change: boolean) this.val = tinymce.activeEditor.getContent();

để

01.

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

viết lại tinymce.init(options)

để

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

và cuối cùng thêm một phương pháp ngOnDestroy

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

này được cố định lỗi đối với tôi và cũng cố định cho tôi khi biên tập viên là đã khởi tạo và tôi đã sử dụng lại nó, nó sẽ không biên dịch. nhưng bây giờ vì sự ngOnDestroy tôi bây giờ có thể phá hủy các biên tập viên và afterViewInit sẽ nhớ lại những tinymce.init