TinyMCE Not Working in Angular-Cli Project

问题

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

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>

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...

回答1:

You've done the implementation properly as it seems. You don't need the debugger in ngOnInit() since it's just for testing purposes. (As I knew)

Make sure you pass some unique value for [elementId]="editor"

And then try this out.

Parse whatever the text you want to show in the WYSIWYG in [text]="" (This may be the data from the backend)

Your 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);
    });
  }

Change this as -

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

writer.component.html -

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

From the component, you're calling the app-writer you can track the changes through a function like this...

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

This is how I managed to get it done after going through their docs.

Ref - https://www.tinymce.com/docs/integrations/angular2/

回答2:

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

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

Then I changed to

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

As You see, I only changed:

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

And it is working fine!!!

来源：https://stackoverflow.com/questions/41522036/tinymce-not-working-in-angular-cli-project

标签

angular

tinymce

angular-cli