修改

Question

大家好，我一直试图在TinyMCE文本区域中显示HTML上下文。当我第一次选择要编辑的行时，它会显示数据但是，在我选择不同的行后，它无法获取上下文。任何帮助，将不胜感激。这是我创建的组件和HTML。我正在尝试在单击编辑按钮时显示上下文。

import { Component, AfterViewInit, OnDestroy, Input, Output, EventEmitter, ElementRef, provide } from 'angular2/core';
import { RdComponent, RdLib } from '../../../../../node_modules/mulberry/core';

declare let tinymce: any;

@Component({
  selector: 'aril-mail-template',
  template: `<textarea contentEditable="true" style="height:30em"><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;
  elementRef: ElementRef;

  constructor(elementRef: ElementRef) {
    super()
    this.elementRef = elementRef;
  }

  ngOnChanges() {
    tinymce.init({
      selector: 'textarea',
      height: "30em",
      menubar: true,
      plugins: [
        'advlist autolink lists link image charmap print preview anchor',
        'searchreplace visualblocks code fullscreen hr',
        'insertdatetime media table contextmenu paste',
        'wordcount'
      ],
      toolbar: 'bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image 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',
      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 #mailTemplateProvider rd-client-side-paging [rd-service-proxy]="clientSideProxy" [rd-page-size]="25"
  (rd-init)="mailTemplateProvider.call(getMailTemplates())">
</rd-service-provider>
<rd-service-provider #deleteMailTemplateProvider [rd-service-proxy]="serviceProxy" (rd-success)="toastr.info(translate('İşlem Başarıyla Sonlandırıldı')); mailTemplateProvider.call(getMailTemplates())"></rd-service-provider>
<rd-service-provider #saveMailTemplateProvider [rd-service-proxy]="serviceProxy" (rd-success)="toastr.info(translate('Mail Şablonu Başarıyla Oluşturuldu.')); mailTemplateProvider.call(getMailTemplates())"></rd-service-provider>

<div class="row">
  <div class="col-md-4">
    <rd-portlet [rd-text]="translate('Mail Şablonları')" rd-color="green" rd-icon="fa fa-envelope">
      <rd-tools>
        <rd-tool rd-icon="icon-plus" rd-color="white" [rd-tooltip]="translate('Yeni Şablon Ekle')" rd-animate="flash infinite" (rd-click)="data;showMailTemplate=true;console.log(data)"></rd-tool>
        <rd-tool rd-type="refresh" *ngIf="mailTemplateProvider.content.state.serviceCalled"></rd-tool>
        <rd-tool rd-type="collapse" [rd-default-collapse]="false"></rd-tool>
      </rd-tools>

      <rd-body>
        <rd-grid #grid [rd-provider]="mailTemplateProvider" rd-enableSorting="true" [rd-block]="mailTemplateProvider.content.state.waitigForResponse">
          <rd-grid-column [rd-text]="translate('Mail Türü')" rd-key="EmailType">
            <template #item>
              <rd-value rd-type="text" [rd-model]="item.EmailType"></rd-value>
            </template>
          </rd-grid-column>
          <rd-grid-column [rd-text]="translate('Mail Konusu')" rd-key="MailSubject">
            <template #item>
              <rd-value rd-type="text" [rd-model]="item.MailSubject"></rd-value>
            </template>
          </rd-grid-column>
          <rd-grid-column rd-type="operations">
            <template #item>
              <rd-button rd-icon="fa fa-pencil" rd-icon-color="yellow" rd-size="small" [rd-tooltip]="translate('Düzenle')" (rd-click)="data = item;showMailTemplate=true;console.log(data)"></rd-button>
              <rd-button rd-icon="fa fa-trash-o" rd-icon-color="red" rd-size="small" [rd-tooltip]="translate('Sil')" (rd-confirm-popover)="$event ? deleteMailTemplateProvider.call(deleteMailTemplates(item.Serno)) : null"></rd-button>
            </template>
          </rd-grid-column>
        </rd-grid>
      </rd-body>
    </rd-portlet>
  </div>

  <div class="col-md-8" *ngIf="showMailTemplate">
    <rd-portlet [rd-text]="translate('Mail Şablonu Tanımlama')" rd-color="green" rd-icon="fa fa-envelope">
      <rd-body>
        <rd-form>
          <rd-body>
            <div class="row">
              <div class="col-md-12">
                <div class="col-md-12">
                  <div class="col-md-6" style="padding:0%">
                    <rd-field [rd-text]="translate('Mail Türü')"></rd-field>
                    <rd-input-select [(rd-model)]="data.EmailType" rd-form-data="EmailType" rd-display="Value" rd-value="Key" [rd-items]="mailTemplatesList">
                    </rd-input-select>
                  </div>
                  <div class="col-md-6">
                    <rd-field [rd-text]="translate('Mail Konusu')"></rd-field>
                    <rd-input-text [(rd-model)]="data.MailSubject" rd-form-data="MailSubject" [rd-required]="true"></rd-input-text>
                  </div>
                </div>
                <div class="col-md-12">
                  <rd-field [rd-text]="translate('Mail İçeriği')"></rd-field>
                  <aril-mail-template [(rd-model)]="data.MailContent" (mail-template-save)="mailContent = $event" [rd-required]="true"></aril-mail-template>
                </div>
              </div>
            </div>
          </rd-body>
          <rd-footer>
            <rd-submit [rd-text]="translate('Kaydet')" rd-size="medium" (rd-click)="saveMailTemplateProvider.call(saveMailTemplates($event, mailContent))"></rd-submit>
            <rd-clean [rd-text]="translate('Temizle')" rd-size="medium"></rd-clean>
          </rd-footer>
        </rd-form>
      </rd-body>
    </rd-portlet>
  </div>
</div>

Answer 1

现在我看到的问题是，当您的数据发生变化时，您正在尝试初始化一个新的tinymce编辑器，但编辑器已经存在，因此editor.on('init'...)不再被调用。只有在初始化tinymce后切换到另一个电子邮件模板时才会出现此问题，但在选择第一行时工作正常。

所以基本上第一次调用tinymce.init工作正常，再次调用。当切换到另一行时，MailTemplatesComponent保持不变，它不会改变，只改变其中的数据，因此它对editor的引用也将被保留而不会被破坏，这就是为什么调用init再次可能无效。 tinymce可能会想，嘿，我已经初步确定了，我不必再做了。

我看到以下两种可能的解决方案。首先是删除每个ngOnChanges上的编辑器并重新启动。

ngOnChanges() {
    if(this.editor){
        tinymce.remove(this.editor);
    }
    tinymce.init({
        ....
    });
}

但这似乎有点矫枉过正。第二件事是我也会推荐。检查组件的编辑器是否已存在。如果是这样，请不要再次尝试初始化，而只是设置内容。

ngOnChanges() {
    if(this.editor){
        this.editor.setContent(this.model);
    } else {
        tinymce.init({
            ....
        });
    }
}

修改

现在，当您想要创建新的MailTemplate时，必须覆盖当前值，以便触发ngOnChanges功能。目前，您并未更改绑定的data对象。

<rd-tool ... (rd-click)="data;showMailTemplate=true;console.log(data)"></rd-tool>

您可以看到您没有将数据设置为任何内容。为了清理这一点，我会将代码放在(rd-click)事件中并将其放入组件中的函数中。在该功能中，我将更新数据，为其提供空值。这样就会触发ngOnChanges函数，并且你的新MailContent值（我们设置为空字符串）将被设置为tinymce编辑器。

createNewTemplate(){
    this.data = {
        EmailType: "", 
        MailSubject: "", 
        MailContent: ""
    };
    this.showMailTemplate=true;
    console.log(this.data);
}

然后在你的html (rd-click)绑定中调用此函数。

<rd-tool ... (rd-click)="createNewTemplate()"></rd-tool>

Answer 2

您无法定义编辑器在您尝试初始化的编辑器中的init 内部执行的操作。这没有意义。

无法在文本区域中显示HTML上下文

2 个答案:

修改