Tinymce Angular 2集成:如何设置编辑器的内容?

问题描述 投票:0回答:5

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

任何的想法 ?

angular tinymce
5个回答
3
投票

假设你正在实施@Directive中解释的TinyMCE official documentation

添加额外的@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的评论


4
投票

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

对于具有相同问题的人:您可以使用eventemitter在http调用结束时更新内容:

定义输入:

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

1
投票

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

或者我知道这肯定有效:https://github.com/chymz/ng2-ckeditor


1
投票

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

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

然后在你的Tinymce组件中添加

@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('');
    }
  }
}

0
投票

这可能会有所帮助

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>
© www.soinside.com 2019 - 2024. All rights reserved.