【问题标题】：Can't Display HTML context into the Text Area无法在文本区域中显示 HTML 上下文
【发布时间】：2017-12-05 07:37:01
【问题描述】：

大家好，我一直在尝试在 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>

【问题讨论】：

请删除其中的angularjs标签，因为angular2/4与angularjs无关。
@BT101 是的，我知道它不是 AngularJs。我过去使用过 AngularJs，现在我使用的是 Angular2，这就是为什么我认为 AngularJs 社区中的某个人可能会提供帮助。
<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>这是你的编辑按钮吗？
是的，这是我的编辑按钮。
所以这是一种包含多个条目的表格或网格，当您通过按钮选择其中一个时，您希望在 div 中显示所选条目的详细信息*ngIf="ShowMailTemplate"，对吗？但是邮件模板只显示了邮件类型和主题，但是在数据发生变化时邮件内容并没有正确显示，只有第一次点击按钮的时候，对吧？

标签： javascript angular typescript tinymce

【解决方案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>

【讨论】：

谢谢@Benedikt，感谢您的帮助，我已经设法解决了这个问题。如果你不介意我还有一个问题要和你讨论。正如您在上面的 HTML 中看到的，我也在尝试创建一个空白编辑器来自己填充数据。用那个代码。但这与 fir 调用中的前一个问题相同，它创建了一个空白编辑器，当我通过单击事件调用编辑器时，在调用另一个空白编辑器后，它返回当前行数据。有什么建议吗？
创建空白编辑器。
<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>这一行对吧？
非常感谢@Benedikt 现在，它可以正常工作。感谢您的帮助和考虑。

【解决方案2】：

你无法定义编辑器在init 在你试图初始化的编辑器上做什么。这没有意义。

【讨论】：