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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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; } }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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
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(); }