angular2 所见即所得的 tinymce 实现和 2 向绑定

Question

您好，我正在尝试将 tinymce 实现到 angular 2 组件中，供小型论坛创建新线程。我希望将 textarea (tinymce) 的内容双向绑定到组件内的变量。到目前为止，提交按钮有效，但 keyup 事件无效。

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>

在你的组件中 class:

@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

我知道这有点旧post。但是在挠头超过2天之后。我终于能够弄清楚这一点，并认为这可能对其他人有用。所以在这里分享

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' 的错误，所以今天终于修复了错误并且我想分享它，这样人们就不必再搜索它可能是什么错误了。我知道这是一个旧的 post 对此我深表歉意。

获取github（指令）的代码。 link 下面。谢谢@Abhijith Nagaraja post.

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;

重写方法

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

替换为 ValueOnChange(change: boolean) this.val = tinymce.activeEditor.getContent();

至

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

angular2 所见即所得的 tinymce 实现和 2 向绑定

angular2 wysiwyg tinymce implementation and 2-way-binding

typescript

angular

tinymce

wysiwyg

rich-text-editor