如何獲取角度2中的jQuery CKEDITOR值？

Question

我必須在我們的應用程序中使用Jquery Ckeditor。 但是，我無法獲得Ckeditor的價值。

請檢查實時柱塞示例：此處柱塞

我的組件

1）index.html

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

2）app.ts

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, []);

請檢查實時柱塞示例：此處柱塞

Answer 1

使用ViewChild裝飾器，可以訪問實例化的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, []);

Answer 2

您可以實現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;
  }
}

柱塞示例

如何獲取角度2中的jQuery CKEDITOR值？

問題描述

2 個解決方案

解決方案1
1 2016-09-12 14:34:42

解決方案2
1 2016-09-12 14:41:02

如何獲取角度2中的jQuery CKEDITOR值？

問題描述

2 個解決方案

解決方案1 1 2016-09-12 14:34:42

解決方案2 1 2016-09-12 14:41:02

解決方案1
1 2016-09-12 14:34:42

解決方案2
1 2016-09-12 14:41:02