angular2 学习笔记 ( 第3方插件 jQuery and ckeditor )

refer : 

https://forums.meteor.com/t/importing-ckeditor-using-npm/28919/2   (ckeditor)

https://github.com/angular/angular-cli/issues/3094 (jQuery)

Ckeditor

1. npm install ckeditor --save 

2. npm install @types/ckeditor --save --dev

1. 用 npm 的话只能安装 standard 版本 

所以不推荐大家使用 npm 安装 

2. npm install @types/ckeditor --save  (typescipt version 可以用 npm 下载)

3.去这里选好你要的配置, 然后下载整个 ckeditor 文档 http://ckeditor.com/builder

4. index.html 写上 

<script>
　　CKEDITOR_BASEPATH = '/app/ckeditor/';
</script>

5. 创建一个 /app/ckeditor 文档, 把刚才下载的文档放进去

6. import "./ckeditor/ckeditor"; (对应的路径去 import)

7. 写一个 accessor component 

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef, forwardRef, OnDestroy, ApplicationRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";

import "../ckeditor/ckeditor";

type PublishMethod = (value: string) => void
@Component({
  selector: 'ck',
  templateUrl: './ck.component.html',
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CkComponent),
    multi: true
  }],
})
export class CkComponent implements OnInit, OnDestroy, AfterViewInit, ControlValueAccessor {

  constructor(
    private appRef : ApplicationRef
  ) { }

  ngOnInit() { }
  private editor: CKEDITOR.editor
  private model: string

  @ViewChild("ck", { read: ElementRef }) ck: ElementRef

  ngAfterViewInit() {
    setTimeout(() => {
      this.editor = CKEDITOR.replace(this.ck.nativeElement);
      if (this.model) {
        this.editor.setData(this.model);
      }
      this.editor.on("change", (event) => {
        let data = event.editor.getData();      
        this.publish(data);     
        this.appRef.tick();
      });
    });
  }
 
  ngOnDestroy() {
    this.editor.destroy();
  }

  writeValue(value: string): void {
    if (this.editor) {
      this.editor.setData(value);
    }
    else {
      this.model = value;
    }
  }

  private publish: PublishMethod
  registerOnChange(fn: PublishMethod): void {
    this.publish = fn;
  }
  private touch: any
  registerOnTouched(fn: any): void {
    this.touch = fn;
  }

}

<textarea #ck (focus)="touch()" >
</textarea>  

p.s 这里可以方便设置 config : http://nightly.ckeditor.com/17-03-07-07-09/full/samples/toolbarconfigurator/index.html#basic 

jQuery

1. npm install jquery --save

2. npm install @types/jquery --save -dev

3. import * as $ from 'jquery';

ngAfterViewInit() {
  setTimeout(() => {
      $("div").show();         
  });
}

如果要用插件的话也是一样 

4. npm install datatables.net --save

5. npm install @types/jquery.datatables --save-dev

import * as $ from 'jquery'; 
import 'datatables.net';

ngAfterViewInit() {
   $('#example').DataTable();
}