angular2 wysiwyg tinymce 实现和 2-way-binding答案

【问题标题】：angular2 wysiwyg tinymce implementation and 2-way-bindingangular2 wysiwyg tinymce 实现和 2-way-binding
【发布时间】：2016-04-25 12:59:41
【问题描述】：

您好，我正在尝试将 tinymce 实现为 angular 2 组件，以供小型论坛创建新线程。我希望将文本区域（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>

【问题讨论】：

keyup 不起作用，因为它现在发生在 tinymce 中，而不是你的 textarea 中
我在另一个问题上回答了这个问题stackoverflow.com/a/39424976/235648

标签： typescript angular tinymce wysiwyg rich-text-editor

【解决方案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;
}

【讨论】：

谢谢蒂埃里！我在哪里可以获得 TinyMceValueAccessor？你能做一个plunkr的例子吗？我对值访问器不是很熟悉
不客气！你说的“我在哪里……”是什么意思？实际上这是一个自定义实现...
我收到错误 Provider is not defined for providers: [ TinyMceValueAccessor ]
你应该输入这个常量：TINY_MCE_VALUE_ACCESSOR，但是这个解决方案无论如何都不起作用
directives 在 @Component() 中解析的对象中不再存在？

【解决方案2】：

或者像这样，使用 tmce 的 change 事件和 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 的实现的指令中。

【讨论】：

【解决方案3】：

我想说我做了与上述相同的实现，但是我遇到了这个奇怪的错误，并在修复'cannot modify NodeName of Null'的这个错误时四处奔波，所以今天我终于修复了这个错误，我想分享它，所以人们不必再搜索它可能是什么错误。我知道这是一篇旧帖子，对此我深表歉意。

获取github的代码（指令）。下方链接。谢谢@Abhijith 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;

重写方法

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

【讨论】：

【解决方案4】：

我知道这是一个有点旧的帖子。但是在挠了我2天多之后。我终于能够弄清楚这一点，并认为这可能对其他人有用。所以在这里分享一下

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

【讨论】：