Question

我必须在我们的应用程序中使用Jquery Ckeditor。但是，我无法获得Ckeditor的价值。

请查看实时的Plunker示例：Plunker Here

我的组件

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

请查看实时的Plunker示例：Plunker Here

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 的示例：

<Grid Margin="190, 10" Grid.Row="0" >
   <oxy:PlotView />
</Grid>

<强> Plunker Example

如何获得角度2的jquery CKEDITOR值？

2 个答案: