代码之家 › 专栏 › 技术社区 › ismailuztemur

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

tinymce typescript angular javascript

ismailuztemur · 技术社区 · 8 年前

大家好,我一直在尝试将HTML上下文显示到TinyMCE文本区域。当我第一次选择要编辑的行时,它显示数据,但在我选择不同的行后,它无法获取上下文。任何帮助都将不胜感激。这是我创建的组件和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>

2 回复 | 直到 8 年前

Benedikt Schmidt 8 年前

现在我看到的问题是,当数据更改时,您试图初始化一个新的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({
            ....
        });
    }
}

编辑

现在,当您想要创建一个新的邮件模板时,您必须覆盖当前值,以便 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点击) 结合

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

user7881930 user7881930 8 年前

您无法定义编辑器在上执行的操作 init 在…内 您尝试初始化的编辑器。这没有道理。