CODEWITHSUNDEEP
angulardata-bindingtinymce
Eric
Eric

Reputation: 2091

TinyMCE & Angular 2: Setting The Editor's Content Based On @Input

New to tinymce and not sure where to actually put the setContent(this.content) method. My current version is causing me to get an error:

TypeError: null is not an object (evaluating 'body.nodeName') --- runTask — zone.js:170

The persona object is retrieved via a service that queries my database, which is working correctly.

I have my instances set up like this one in my persona.component.html:

<app-tinymce
   [elementId]="'persona-footnotes'"
   (onEditorContentChange)="keyupHandler($event)"
   [content]="persona.footnotes"
   ></app-tinymce>

The app-tinymce.component.ts:

import {
  Component,
  AfterViewInit,
  EventEmitter,
  OnDestroy,
  Input,
  Output
} from '@angular/core';
import 'tinymce';
import 'tinymce/themes/modern';
import 'tinymce/plugins/table';
import 'tinymce/plugins/link';
import 'tinymce/plugins/paste';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/code';

declare let tinymce: any;

@Component({
  selector: 'app-tinymce',
  templateUrl: './tinymce.component.html',
  styleUrls: ['./tinymce.component.scss']
})
export class TinymceComponent implements AfterViewInit, OnDestroy {
  @Input() elementId: String;
  @Input() content: String;
  @Output() onEditorContentChange = new EventEmitter();

  editor;

  ngAfterViewInit() {
    tinymce.init({
      selector: '#' + this.elementId,
      plugins: ['link', 'table', 'lists', 'advlist', 'code'],
      skin_url: '/assets/tinymce/skins/lightgray',
      toolbar: [
        'bold italic underline strikethrough subscript superscript removeformat | formatselect | fontsizeselect | bullist numlist outdent indent | link table | code'
      ],
      menubar:'edit',
      theme:'modern',
      height:'300',
      setup: editor => {
      editor.setContent(this.content);
      console.log(this.content); // this part outputs the correct data
        this.editor = editor;
        editor.on('keyup change', () => {
          const content = editor.getContent();
          this.onEditorContentChange.emit(content);
        });
      }
    });
  }

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

Thinking this is a matter of where/"when" to put the setContent(this.content) method but, again, not sure where?

Upvotes: 2

Views: 3976

Answers (2)

ismailuztemur
ismailuztemur

Reputation: 11

Here is my full code for TinyMCE editor component. It may be helpfull. 

import { Component, AfterViewInit, OnDestroy, Input, Output, EventEmitter, ElementRef, provide, forwardRef, View } from 'angular2/core';
import { RdComponent, RdLib } from '../../../../../node_modules/mulberry/core';

declare let tinymce: any;

@Component({
  selector: 'aril-mail-template',
  template: `<textarea style="height:25em"><p>{{model}}</p></textarea>`
})

export class MailTemplatesComponent extends RdComponent {

  @Input("rd-model") model;
  @Input("rd-default") default;
  @Input("rd-required") required;
  @Output("mail-template-save") mailTemplateSave: EventEmitter<any> = new EventEmitter<any>();

  editor;

  ngOnInit() {
    let that = this;
    tinymce.init({
      selector: 'textarea',
      height: "25em",
      menubar: true,
      plugins: [
        'advlist autolink lists link image charmap print preview anchor',
        'searchreplace visualblocks code fullscreen hr',
        'insertdatetime media table contextmenu paste spellchecker',
        'wordcount'
      ],
      toolbar: 'styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image spellchecker code',
      table_toolbar: "tableprops cellprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol",
      powerpaste_allow_local_images: true,
      powerpaste_word_import: 'prompt',
      powerpaste_html_import: 'prompt',
      spellchecker_language: 'en',
      spellchecker_dialog: true,
      content_css: [
        '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
        '//www.tinymce.com/css/codepen.min.css'],

        setup: editor => {
          this.editor = editor;
          editor.on('init', () => {
            this.model && this.editor.setContent(this.model, {format: 'raw'});
          });
          editor.on('change', () => {
            const content = editor.getContent();
            this.mailTemplateSave.emit(content);
          });
        }      
    });    
  }


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

}

Upvotes: 1

Michael Fromin
Michael Fromin

Reputation: 13726

You are close. Your setup function needs to delay the setContent() call until the editor is initialized. There is an event for that so you can try something like this:

setup: editor => {
    this.editor = editor;
    editor.on('init', () => {
      editor.setContent(this.content);
    });
  }

This will delay the call to setContent() until the editor is initialized and ready for you to use API calls.

Upvotes: 5

Related Questions