각 2 cli로 tinymce로 데이터를 바인딩하는 방법

나는이 두 가지 cli에 tinymce를 통합하는 데 성공했습니다. , 내 문제는 이제 어떻게 구성 요소에서 바인딩하여 값을 구성하는 것입니까?각 2 cli로 tinymce로 데이터를 바인딩하는 방법

예를 들어 나는 product.component.ts 및 product.component.html을 가지고 있습니다.

<simple-tiny 
[elementId]="'my-editor-id'" 
(onEditorKeyup)="keyupHandlerFunction($event)" 
> 
</simple-tiny>

product.component.ts

import { Component,Input,OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-product', 
    templateUrl: './product.component.html' 
}) 
export class ProductComponent { 

my-editor-id:any -->error 
ngOnInit(): void { 

    this.my-editor-id="abcdefg"; --> error, i want bind abcdefg into tinymce are? how? 


} 
}

간단 tiny.component.ts :

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

@Component({ 
selector: 'simple-tiny', 
template: `<textarea id="{{elementId}}"></textarea>` 
}) 
export class SimpleTinyComponent implements AfterViewInit, OnDestroy { 
@Input() elementId: String; 
@Output() onEditorKeyup = new EventEmitter<any>(); 

editor; 

ngAfterViewInit() { 
tinymce.init({ 
    selector: '#' + this.elementId, 
    plugins: ['link', 'paste', 'table'], 
    skin_url: 'assets/skins/lightgray', 
    setup: editor => { 
    this.editor = editor; 
    editor.on('keyup',() => { 
     const content = editor.getContent(); 
     this.onEditorKeyup.emit(content); 
    }); 
    }, 
}); 
} 
ngOnDestroy() { 
    tinymce.remove(this.editor); 
} 
}

TinyMCE에 지시어는 product.component.html에

product.component.html입니다

출처

2017-01-12 GAJIkoe gajikoe

다음은 내가 한 일입니다. 완벽한 양방향 바인딩은 아니지만 제 유스 케이스에서는 작동합니다. 또한 ngOnChages t를 사용하여 편집기를 업데이트 할 수 있으므로 init에서 값을 가져 오는 대신 'model'입력이 상위 구성 요소에서 변경된 경우이를 업데이트합니다. 귀하의 경우에는

<html-editor 
     [elementId]="'multi-line-text-editor'" 
     [model]="valueYouWantUpdated" 
     (modelChange)="valueYouWantUpdated = $event"> 
</html-editor> 

export class HtmlEditorComponent implements AfterViewInit, OnDestroy 
{ 
    @Input() elementId: String; 
    @Input() model: String; 
    @Output() modelChange = new EventEmitter<any>(); 

    tinymce = (<any>window).tinymce; 
    editor; 

    ngAfterViewInit() 
    { 
     this.tinymce.init({ 
      selector: '#' + this.elementId, 
      height: '480', 
      plugins: ['paste'], 
      theme: 'modern', 
      paste_as_text: true, 
      setup: editor => 
      { 
       this.editor = editor; 

       editor.on('init',() => 
       { 
        if (this.model) 
        { 
         editor.setContent(this.model); 
        } 
       }); 

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

    ngOnDestroy() 
    { 
     this.tinymce.remove(this.editor); 
    } 
}

출처

2017-01-12 09:45:40

감사 product.component.ts하기 위해 다음과 같은 기능을 추가 할 수 있지만 난 여전히 confuse..what 템플릿 코딩되어있다 : ''?? 완전한 예를 들어 줄 수 있니? –

, 간단하게 답변

keyupHandlerFunction(e):void{ 
 
    console.log(e); //e is the HTML output from your TinyMCE component 
 
    }

출처

2017-08-25 19:33:21 joshpierro

각 2 cli로 tinymce로 데이터를 바인딩하는 방법

답변

관련 문제