Using Tinymce in Angular2 project

Question

I\'m trying to embed tinymce into my website which is built using Angular2. Following is my component:

export class myComponent implements          


        

Answer 1

I'm on Angular v4 final. Here's how I implemented the TinyMCE editor:

tiny-editor.component.ts

imports...

declare var tinymce: any;

const contentAccessor = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => TinyEditorComponent),
  multi: true
};

@Component({
  selector: 'app-tiny-editor',
  styleUrls: ['./tiny-editor.component.scss'],
  providers: [contentAccessor],
  template: `
      
  `
})
export class TinyEditorComponent implements AfterViewInit, ControlValueAccessor {
  private onTouch: Function;
  private onModelChange: Function;

  registerOnTouched(fn) {
    this.onTouch = fn;
  }
  registerOnChange(fn) {
    this.onModelChange = fn;
  }

  writeValue(value) {
    this.editorContent = value;
  }

  @Input() elementId: String;
  @Output() onEditorContentChange = new EventEmitter();

  constructor() { }

  editor;
  editorContent: string = null;

  ngAfterViewInit() {
    tinymce.init({
      selector: `#${this.elementId}`,
      plugins: ['link', 'table'],
      skin_url: '../assets/skins/lightgray',
      schema: 'html5',
      setup: editor => {
        this.editor = editor;
        editor.on('keyup change', () => {
          const tinyContent = editor.getContent();
          this.editorContent = tinyContent;
          this.onEditorContentChange.emit(tinyContent);
          this.onModelChange(tinyContent);
          this.onTouch();
          console.log(tinyContent);
        });
      }
    });
  }
}

create-article.component.html

This seems to be working, although when rendering out the form.value there's some delay in the content showing.