Как добавить TinyMce в angular 2?

Я новичок в angular 2 и пытаюсь интегрировать tinymce в angular 2, но я не могу использовать tinymce в своем проекте. Что я сделал до сих пор, так это установил tinyMCe с помощью Bower в своем проекте. Все файлы js успешно добавлены в мой проект. Затем я добавил все ссылки на страницу макета, как показано ниже:

        <script src="~/lib/tinymce/tinymce.js"></script>
        <script src="~/lib/tinymce/themes/modern/theme.js"></script>
        <script src="~/lib/tinymce/plugins/link/plugin.js"></script>
        <script src="~/lib/tinymce/plugins/paste/plugin.js"></script>
        <script src="~/lib/tinymce/plugins/table/plugin.js"></script>

После этого я написал компонент, в котором я буду использовать tineMce, как показано ниже:

import { Component, OnInit } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { NgForm } from "@angular/forms";
import Page = require("../../interfaces/iPage");
import PageService = require("../../services/page.service");
@Component({
    //no need for selector as it will be loaded via routing
    templateUrl: "/page/addEdit"
})


export class AddEditPageComponent implements OnInit {
    model = this.newModel();
    errorMessage: any;
    tinymce: any;

    constructor(private pageService: PageService.PageService) {
        this.tinymce.init({
            selector: "[tinymce]"
        });
    }

    ngOnInit() {

    }

    newModel(): Page.IPage {
        return {
            pageId: 0,
            pageName: null,
            title: null,
            content:null
        };
    }

    submitForm(form: NgForm) {
        debugger;
        this.pageService.save(this.model).subscribe(model => {
            this.model = this.newModel();
        },
            null);
    }


}

Затем я добавляю textArea в html, как показано ниже:

<textarea class="form-control" name="model.content" [tinymce]="tinymce" style="height: 300px" [(ngModel)]="model.content" placeholder="Description"></textarea>

Моя страница работает нормально, когда я не использую tinYmce, но когда я использую tinyMCe, на экране соболезнований появляется эта ошибка: Ошибки синтаксического анализа шаблона: невозможно связать с 'tinymce', так как это неизвестное свойство 'текстовое поле'.

Если я удалю текстовое поле, но не удалю tinYmce из инициализации, появится эта ошибка: TypeError: Cannot read property 'init' of undefined

Я не знаю, что я делаю неправильно. Пожалуйста, помогите.


angular tinymce
person umer    schedule 16.01.2017    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Чтобы использовать [tinymce] в текстовом поле, вы должны объявить его как новое свойство ввода.

import { Input } from '@angular/core';
@Component({....})
export class AppComponent {
  @Input() tinymce: string;
}

TinyMCE будет ожидать допустимый селектор css, и вы можете захотеть прослушать некоторые события, чтобы поддерживать живую привязку.

См. ниже полную реализацию

import { Component, AfterViewInit, OnDestroy, Output, EventEmitter  } from '@angular/core';

declare var tinymce: any;

@Component({
  selector: 'my-app',
  template: `
            <h3>Angular 2 Embedding TinyMCE</h3>
            <textarea>Start Typing</textarea>
            <p>{{ content }}</p>
            `
})
export class AppComponent implements AfterViewInit, OnDestroy { 

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

  ngAfterViewInit() {
    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);
  }

}

Обратите внимание, что в моем случае я загрузил tinymce с CDN, поэтому мне не нужно было настраивать файлы темы.

<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
person Evans M.    schedule 16.01.2017
comment
Отличная работа, Эванс! - person Super Coder; 16.01.2017
comment
Спасибо @Эванс. Он работает как чемпион. Вы сделали мой день. Большое спасибо. - person umer; 16.01.2017