Question

我需要在我正在努力的角度2项目中实现文本编辑器，以允许用户根据自己的自定义添加帖子。经过研究，我找到了 TinyMCE 。我按照文档进行了操作，并按照描述设置，但编辑器没有显示出来。我正在使用 angular-cli 。我查看了 Github 上的示例，我的代码似乎没有任何问题，但不知怎的，编辑器不会出现。我得到的只是一个空白的textarea框。

根据文档，这是我迄今为止所做的。

npm install tinymce --save

这是我的angular-cli.json文件：

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/semantic-ui/dist/semantic.min.js",
        "../node_modules/tinymce/tinymce.js",
        "../node_modules/tinymce/themes/modern/theme.js",
        "../node_modules/tinymce/plugins/link/plugin.js",
        "../node_modules/tinymce/plugins/paste/plugin.js",
        "../node_modules/tinymce/plugins/table/plugin.js",
        "scripts.js"
      ]

在我的名为writer的组件中：

import {Component, OnInit, AfterViewInit, OnDestroy, Input, Output, EventEmitter} from "@angular/core";

declare const tinymce: any;

@Component({
  selector: 'app-writer',
  templateUrl: './writer.component.html',
  styleUrls: ['./writer.component.css']
})
export class WriterComponent implements AfterViewInit, OnDestroy, OnInit {

  @Input() elementId: string;
  @Input() text: string;
  @Output() onEditorKeyUp = new EventEmitter<any>();

  editor;

  constructor() {
  }

  ngOnInit() {
    debugger;
    if (!this.text) {
      this.text = '';
    }
  }

  ngAfterViewInit(): void {
    console.log('Initializing instance of tinymce!!');
    // debugger;
    tinymce.init({
      selector: '#' + this.elementId,
      height: 500,
      schema: 'html5',
      plugins: ['link', 'paste', 'table'],
      skin_url: 'assets/skins/lightgray',
      toolbar: 'bold italic underline strikethrough alignleft aligncenter alignright alignjustify ' +
      'styleselect bullist numlist outdent blockquote undo redo removeformat subscript superscript | code',
      setup: editor => {
        this.editor = editor;
        editor.on('init', ed => {
          ed.target.setContent(this.text);
          console.log('editor initialized');
        });
        editor.on('blur', () => {
          const content = editor.getContent();
          this.onEditorKeyUp.emit(content);
        });
      },
    });
  }


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

}

我已将皮肤复制到资源文件夹。

这就是我在父组件中调用此组件的方式：

<app-writer [elementId]="editor" (onEditorKeyUp)="EditorKeyUpHandler($event)" [text]="hithere"></app-writer>

然而，我得到的只是一个文本框。这是你用原始html获得的textarea相同..我没有得到任何错误，我也没有得到它。谢谢你的帮助...

Answer 1

您已经正确地完成了实施。您不需要debugger中的ngOnInit()，因为它仅用于测试目的。（据我所知）

确保为[elementId]="editor"

传递一些唯一值

然后尝试一下。

解析您要在[text]=""中的所见即所得中显示的文本（这可能是来自后端的数据）

您的代码 -

setup: editor => {
    this.editor = editor;
    editor.on('init', ed => {
      ed.target.setContent(this.text);
      console.log('editor initialized');
    });
    editor.on('blur', () => {
      const content = editor.getContent();
      this.onEditorKeyUp.emit(content);
    });
  }

将此更改为 -

setup: editor => {
    this.editor = editor;
    editor.on('keyup', () => {
      const content = editor.getContent();
      this.onEditorKeyup.emit(content);
    });
  }

writer.component.html -

<textarea id="{{elementId}}"> {{text}} </textarea>

从组件中，您调用应用程序编写者，您可以通过这样的函数跟踪更改......

EditorKeyUpHandler(event) {
    console.log(event);
    // ......
}

这是我在完成他们的文档后设法完成它的方法。

参考 - https://www.tinymce.com/docs/integrations/angular2/

Answer 2

我在角度2中遇到了这个问题。在我的情况下，我有

[elementId]="my-editor-id"   (onEditorKeyup)="onBodyTextEditorKeyUp($event)"

然后我改为

[elementId]="'my-editor-id'"   (onEditorKeyup)="onBodyTextEditorKeyUp($event)"

如你所见，我只改变了：

"my-editor-id" ---> "'my-editor-id'"

它工作正常!!!

TinyMCE不在Angular-Cli项目中工作

2 个答案: