jqueryの取得方法CKEDITOR角度2の値は？

アプリケーションでJquery Ckeditorを使用する必要があります。しかし、私はCkeditor値を得ることができませんでした。）Plunker Here jqueryの取得方法CKEDITOR角度2の値は？

マイコンポーネント

1）

<html> <head> <title>Angular 2 QuickStart</title> <script src="https://code.angularjs.org/tools/system.js"></script> <script src="https://code.angularjs.org/tools/typescript.js"></script> <script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.dev.js"></script> <script src="//cdn.ckeditor.com/4.5.5/standard/ckeditor.js"></script> <script> System.config({ transpiler: 'typescript', typescriptOptions: { emitDecoratorMetadata: true } }); System.import('./app.ts'); </script> </head> <body> <my-app>loading...</my-app> </body> </html>

index.htmlを

import {bootstrap, Component, Directive, View, ElementRef} from 'angular2/angular2'; 

@Directive({ 
    selector: 'textarea' 
}) 
class CKEditor { 
    constructor(_elm: ElementRef) { 
    CKEDITOR.replace(_elm.nativeElement); 
    } 
} 

@Component({ 
    selector: 'my-app', 
}) 
@View({ 
    directives: [CKEditor], 
    template: ` 
    <textarea>{{ content }}</textarea> 

    <button (click)="getValue()" style="padding:20px 50px;margin-top: 20px;">Add</button>`, 
}) 
class AppComponent { 
    content: any = "test content"; 
    constructor() { 

    } 

    getValue() { 
    alert(this.content) 
    console.log(this.content) 
    } 
} 

bootstrap(AppComponent, []);

app.ts：

ライブPlunker例をご確認ください

ライブPlunker例を確認してください：ViewChildデコレータを使用してPlunker Here

出典

2016-09-12 Bharat Chauhan

を、あなたがインスタンス化さCKEditorバージョンディレクティブにアクセスして、そのメソッドのいずれかを呼び出すことができます。

import {bootstrap, Component, Directive, View, ViewChild, ElementRef} from 'angular2/angular2'; 

@Directive({ 
    selector: 'textarea' 
}) 
class CKEditor { 
    private editor: any; 
    constructor(_elm: ElementRef) { 
    this.editor = CKEDITOR.replace(_elm.nativeElement); 
    } 

    getEditor() { 
    return this.editor; 
    } 
} 

@Component({ 
    selector: 'my-app', 
}) 
@View({ 
    directives: [CKEditor], 
    template: ` 
    <textarea >{{ content }}</textarea> 

    <button (click)="getValue()" style="padding:20px 50px;margin-top: 20px;">Add</button>`, 
}) 
class AppComponent { 
    content: any = "test content"; 
    @ViewChild(CKEditor) editorDirective; 

    constructor() { 

    } 

    getValue() { 
    this.content = this.editorDirective.getEditor().getData(); 
    console.log(this.content); 
    } 
} 

bootstrap(AppComponent, []);

出典

2016-09-12 14:34:42

非常に非常にありがたく、私の友達.. –

あなたは双方向を持っているControlValueAccessorを実装することができますバインディング：

サンプル RC.6 のために：

export const EDITOR_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CKEditorDirective), multi: true }; @Directive({ selector: 'textarea', providers: [EDITOR_VALUE_ACCESSOR] }) export class CKEditorDirective implements AfterViewInit, ControlValueAccessor { ckEditor: any; value: string; onModelChange: Function =() => { }; onModelTouched: Function =() => { }; constructor(private _elm: ElementRef, private zone: NgZone) { } writeValue(value: any): void { this.value = value; if(this.ckEditor) { this.ckEditor.setData(value || ''); } } ngAfterViewInit() { this.ckEditor = CKEDITOR.replace(this._elm.nativeElement); if(this.value) { this.ckEditor.setData(value || ''); } this.ckEditor.on('change',() => { this.zone.run(() => { this.onModelChange(this.ckEditor.getData()); }) }) } registerOnChange(fn: Function): void { this.onModelChange = fn; } registerOnTouched(fn: Function): void { this.onModelTouched = fn; } }

Plunker Example

出典

2016-09-12 14:41:02 yurzui

jqueryの取得方法CKEDITOR角度2の値は？

答えて

関連する問題