Как добавить TinyMce в угловой 2?

Question

Я новичок в угловом 2 и пытаюсь интегрировать tinymce в угловой 2, но я не могу использовать tinymce в своем проекте. Что я сделал до сих пор, я установил tinyMCe, используя беседу в моем проекте. Все 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, то эта ошибка появляется на экране Condole: шаблона синтаксического анализа ERRO rs: Невозможно связать с 'tinymce', так как это не известное свойство 'textarea'.

Если я удалить текстовое поле, но не удалить TinyMCE из инициализации, то эта ошибка возникает: TypeError: Не удается прочитать свойство «инициализации» неопределенной

Я не знаю, что я делаю неправильно , Незлая помощь.

Answer 1

Чтобы использовать [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 из КДСА, так что я не должен настроить файлы тема.

<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>