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
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();
}