无法在 TinyMCE 文本区域上显示我的 HTML 内容答案

【问题标题】：Can't Display my HTML content on TinyMCE Text Area无法在 TinyMCE 文本区域上显示我的 HTML 内容
【发布时间】：2017-11-24 13:19:54
【问题描述】：

我正在尝试通过使用 tinymce 而不是文本区域在我的应用程序模式上创建富文本编辑器。但是我的 HTML 代码无法在富文本的内容区域中显示为文本。我正在使用 Angular 2。

如有任何帮助，将不胜感激

import { Component, AfterViewInit, OnDestroy, Input, Output, EventEmitter } from 'angular2/core';
import { RdComponent, RdLib } from '../../../../../node_modules/mulberry/core';

declare let tinymce: any;

@Component({
  selector: 'mail-template',
  template: `
            <textarea style="height:15em"><p>{{ content }}</p></textarea>            
            `
})
export class MailTemplatesComponent extends RdComponent {

  @Input("rd-model") model: string;

  @Output() onEditorKeyup = new EventEmitter<any>();
  public editor: any;

  ngAfterViewInit() {
    console.log(this.model);
    tinymce.init({
      selector: 'textarea',
      setup: editor => {
        this.editor = editor;
        editor.on('keyup', () => {
          const content = editor.getContent();
          this.onEditorKeyup.emit(content);
        })
      }
    });
  }

  ngOnDestroy() {
    tinymce.remove(this.editor);
  }

}

<div class="col-md-12">
   <rd-field [rd-text]="translate('Mail İçeriği')"></rd-field>
   <mail-template [(rd-model)]="data.MailContent" rd-height="25em"></mail-template>
</div>

【问题讨论】：

你的意思是{{ content }}没有显示在textarea里面吗？可能 tinymce 正在覆盖 textarea 的内容，而 Angular 会丢失它的上下文。
顺便说一句，内容甚至没有被定义为类变量。所以 {{ content }} 是未定义的。无论如何，我不能 100% 确定您要存档的内容。
@Mick 谢谢你，我已经解决了这个问题。问题是，我没有看到我需要使用 {{model}} 而不是 {{content}} 将 HTML 内容放入富文本区域。谢谢。

标签： angular typescript tinymce rich-text-editor html-to-text

【解决方案1】：

我正在使用 angular2-froala-wyswiyg

这是我能找到的最好的并且易于使用（下面的链接）

https://libraries.io/npm/angular2-froala-wyswiyg#usage

npm install angular-froala-wysiwyg --save
npm update froala-editor --save

package.json（文件） 模块安装后

  "dependencies": {
    .....
    "angular-froala-wysiwyg": "^2.7.2",
    ...
}

模块中的导入

import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
...

@NgModule({
   ...
   imports: [FroalaEditorModule.forRoot(), FroalaViewModule.forRoot() ... ],
   ...
})

angular-cli.json(文件) 如下所示更改样式和脚本

 "styles": [
    "styles.css",
    "../node_modules/froala-editor/css/froala_editor.pkgd.min.css",
    "../node_modules/froala-editor/css/froala_style.min.css",
    "../node_modules/font-awesome/css/font-awesome.css"
  ],
  "scripts": [
    "../node_modules/froala-editor/js/froala_editor.pkgd.min.js"
  ],

在您的组件模板中

 <textarea class="form-control" [froalaEditor] name="x" #x="ngModel [(ngModel)]="obj.name" required ></textarea>

编辑后显示为

<span [innerHTML]="obj.name"> </span>

【讨论】：

感谢您的回复。我已经检查了 angular2-froala-wyswiyg 和其他富文本编辑器。但不幸的是，在我目前的项目中它不起作用。只有 TinyMCE 工作得很好。

【解决方案2】：

我找到了问题的最佳解决方案，我认为这对遇到同样问题的人会有所帮助。

http://estynedwards.com/blog/2015/12/04/getting%20started%20with%20angular%202/

【讨论】：