각도 2에 TinyMce를 추가하는 방법은 무엇입니까?

Question

저는 앵귤러 2를 처음 사용하고 앵귤러 2를 통합하려고했지만 프로젝트에서 tinymce를 사용할 수 없습니다. 지금까지 내가 해낸 일은 프로젝트에 bower를 사용하여 tinyMCe를 설치하는 것입니다. 모든 js 파일이 내 프로젝트에 성공적으로 추가되었습니다. 나는 아래와 같이 HTML에서 텍스트 영역 추가 다음

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


} 

: 내가 아래로 tineMce를 사용합니다 어디에서 구성 요소를 작성,이 후

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

: 그럼 레이아웃 아래 페이지에있는 모든 참조를 추가

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

내가 TinyMCE에를 사용하지 않는하지만 난 TinyMCE에를 사용하는 경우,이 오류가 문상 화면에 올 때 내 페이지가 제대로 작동 : 템플릿 구문 분석 에로 rs : 'tinymce'는 'textarea'의 알려진 속성이 아니기 때문에 'tinymce'에 바인딩 할 수 없습니다. 내가 텍스트 영역을 제거하지만, 초기화에서 TinyMCE를 제거하지 않으면

이 오류가 온다 : 형식 오류 : 나는 내가 잘못하고있는 무슨 모르는 정의되지 않은

의 '초기화하기'속성을 읽을 수 없습니다 . 친절하게 도와주세요.

Answer 1

[tinymce]을 텍스트 영역에 사용하려면 새 입력 속성으로 선언해야합니다.

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

TinyMCE는 유효한 CSS 선택기가 필요하며 라이브 바인딩을 지원하기 위해 일부 이벤트를 듣고 싶을 수 있습니다. 내가 설정에 테마 파일을 가지고 있지 않은, 그래서

는 완전한 이행을 아래로 내 경우에는 내가 CDN에서 TinyMCE에를 넣었는지

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

} 

참고를 참조하십시오.

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