TinyMCE在Angular-Cli项目中不起作用 [英] TinyMCE Not Working in Angular-Cli Project

问题描述

我需要在我正在从事的angular 2项目中实现文本编辑器，以允许用户根据自己的自定义添加帖子.经过研究，我发现了 TinyMCE .我已经按照说明进行了文档和设置，但是没有显示编辑器.我正在使用 angular-cli .我查看了 Github 上的示例，我的代码似乎没有错，但是以某种方式，该编辑器不会显示.我得到的只是一个空白的文本框.

I need to implement a text editor in an angular 2 project I'm working on to allow users add posts according to their own customization. After research, I found TinyMCE. I have followed the docs, and setup as described, but the editor doesn't show up. I am using angular-cli. I have looked up at examples on Github, there seems to be nothing wrong with my code, but somehow, the editor won't show up. All I get is a blank textarea box.

这是我到目前为止根据文档所做的.

This is what I have done so far according to the docs.

npm install tinymce --save

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

This is my angular-cli.json file:

"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"
      ]

在我称为作家的组件中:

In my component called 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);
  }

}

我已将皮肤复制到资产文件夹.

I have copied the skins to the assets folder.

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

And this is how I have called this component in the parent component:

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

但是，我得到的只是一个文本框.这是与原始html相同的textarea.我没有收到任何错误，我也没有收到任何提示.感谢您的帮助...

However, all I get is a textbox. This is the same textarea you get with raw html.. I am not getting any error, I am not getting the out also. Thanks for your help...

推荐答案

我在角度2中遇到了这个问题.就我而言，我有

I had this problem in angular 2. In my case I had

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

然后我更改为

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

如您所见，我只是更改了:

As You see, I only changed:

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

它工作正常！！！

这篇关于TinyMCE在Angular-Cli项目中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！