Tinymce Angular 2 integration : how to set the content of the editor?

问题

I TinyMCE integrated into my angular 2 application and it works perfectly. Now i would like to pass an @Input property so that in can set the default content of the editor.

Any idea ?

回答1:

Assuming you are implementing the @Directive as explained in TinyMCE official documentation:

Add an extra @Input parameter:

@Input() initialContent: String;

In the ngAfterViewInit() you have to place the tinymce.init({}) object with the editor configuration and runtime options. It's there where you also have to add a new function:

        init_instance_callback: (editor: any) => {
            editor && this.initialContent && this.editor.setContent(this.initialContent)
        },

Finally, when you are calling the directive you have to add a new attribute with the same name as you used in the @Input parameter than you used in the definition of the directive.

<textarea class="form-control" id="wysiwygText" name="body" rows="3" [htmlEditor] initialContent="{{model.body}}" [(ngModel)]="model.body" #body="ngModel" (onEditorKeyup)="keyupHandlerFunction($event)"></textarea>

This implementation is based on a comment of this article

回答2:

I had the same problem and implemented @nicofx answer. But that didn't do the trick when the content was set by an async http call.

For people having the same issue: you can use an eventemitter which updates the conent when the http call has finished:

Define an input:

@Input() contentEvent: EventEmitter<string>;

Subscribe to the eventemitter if passed:

ngAfterViewInit() {
    tinymce.init({
        selector: '#' + this.elementId,
        plugins: ['link', 'paste', 'table'],
        skin_url: '/assets/skins/lightgray',
        setup: editor => {
            this.editor = editor;

            if (this.contentEvent) {
                this.contentEvent.subscribe(c => {
                    this.setContent(editor, c);
                });
            }
        }
    });
}

And the setcontent function:

private setContent(editor, content) {
    if (editor && content) {
        this.editor.setContent(content);
    }
}

回答3:

You have to implement a wrapper for that, or try the existing ones https://github.com/zackarychapple/ng2-tinymce-wyswig
https://github.com/luigiinred/ng2-tinymce

Alternatively I know this works for sure: https://github.com/chymz/ng2-ckeditor

回答4:

Also you could do it a bit simplier. Just add @Input text in your view where you use tinyMCE component:

<tinymce-editor 
  [desiredInitialText]="text" 
  (onEditorKeyup)="editorChangesHandler($event)">
</tinymce-editor>

Then in your TinymceComponent add

@Input() desiredInitialText: string //Or any other special typing

...

ngOnChanges() {
  if (this.editor) {
    if (this.desiredInitialText && this.desiredInitialText.length > 0) {
      this.editor.setContent(this.desiredInitialText)
    } else {
      this.editor.setContent('');
    }
  }
}

回答5:

import {
    Component,
    OnInit
} from '@angular/core';
import {
    FormBuilder,
    FormControl,
    FormGroup
} from '@angular/forms';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {

    editorForm: FormGroup;
    tinymceInit: any = {};

    constructor(private fb: FormBuilder) {


        this.tinymceInit = {
            content_css: 'assets/skins/ui/oxide/content.min.css',

            base_url: '/tinymce',
            plugins: [
                'advlist autolink lists link image charmap print preview hr anchor pagebreak',
                'searchreplace wordcount visualblocks visualchars code fullscreen',
                'insertdatetime media nonbreaking save table contextmenu directionality',
                'emoticons template paste textcolor colorpicker textpattern code'
            ],
            toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
            toolbar2: 'print preview media | forecolor backcolor emoticons',
            image_advtab: true,
            paste_data_images: true,
            automatic_uploads: true,
            file_picker_types: 'image',
            file_picker_callback(cb, value, meta) {
                if (meta.filetype == 'image') {
                    const input: any = document.createElement('input');
                    input.setAttribute('type', 'file');
                    input.setAttribute('accept', 'image/*');
                    input.click();
                    input.onchange = function() {
                        const file = input.files[0];
                        const reader = new FileReader();
                        reader.onload = function(e: any) {
                            cb(e.target.result, {
                                alt: file.name
                            });
                        };
                        reader.readAsDataURL(file);
                    };
                    input.remove();
                }
            }
        };
    }
    ngOnInit() {
        this.editorForm = this.fb.group({
            'tinyMice': ''
        })
    }

    name = 'Angular';

    imageFilePicker(callback, value, meta) {
        if (meta.filetype == 'image') {
            console.log(value, meta)
        }
    }
}

回答6:

This could 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:15em"><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);
  }

}

 <rd-service-provider #saveMailTemplateProvider [rd-service-proxy]="serviceProxy" (rd-success)="toastr.info(translate('Mail Şablonu Başarıyla Oluşturuldu.'));close()"></rd-service-provider>
 
 
 <aril-mail-template [(rd-model)]="data.MailContent" (mail-template-save)="mailContent = $event" [rd-required]="true"></aril-mail-template>
 
<rd-footer>
        <rd-submit [rd-text]="translate('Save')" rd-size="medium" (rd-          click)="saveMailTemplateProvider.call(saveMailTemplates($event, mailContent))"></rd-submit>
</rd-footer>

来源：https://stackoverflow.com/questions/42412981/tinymce-angular-2-integration-how-to-set-the-content-of-the-editor

标签

angular

tinymce