Question

我将TinyMCE集成到我的angular 2应用程序中，它完美地运行。现在我想传递一个@Input属性，以便in可以设置编辑器的默认内容。

有什么想法吗？

Answer 1

我遇到了同样的问题并实施了@nicofx的答案。但是，当内容由异步http调用设置时，这并没有成功。

对于遇到相同问题的人：您可以使用eventemitter在http调用结束时更新conent：

定义输入：

@Input() contentEvent: EventEmitter<string>;

如果通过，请订阅eventemitter：

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

和setcontent函数：

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

Answer 2

假设您正按照TinyMCE official documentation：

中的说明实施@Directive

添加额外的@Input参数：

@Input() initialContent: String;

在ngAfterViewInit()你必须放置具有编辑器配置和运行时选项的tinymce.init({})对象。在那里你还需要添加一个新功能：

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

最后，当您调用该指令时，您必须添加一个与@Input参数中使用的名称相同的新属性，而不是您在指令定义中使用的名称。

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

此实施基于this article

的评论

Answer 3

你必须为它实现一个包装器，或尝试现有的包装器 https://github.com/zackarychapple/ng2-tinymce-wyswig
https://github.com/luigiinred/ng2-tinymce

或者我知道这确实有效：https://github.com/chymz/ng2-ckeditor

Answer 4

你也可以做得更简单一些。只需在您使用tinyMCE组件的视图中添加@Input文本：

Point<T>

然后在你的TinymceComponent中添加

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

Answer 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)
        }
    }
}

Answer 6

这可能会有所帮助

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>

Tinymce Angular 2集成：如何设置编辑器的内容？

6 个答案: