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

angular2 学习笔记 ( 第3方插件 jQuery and ckeditor )的更多相关文章

  1. 《jQuery权威指南》学习笔记之第2章 jQuery选择器

    2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制  1.代码更简单   示例2-1     使用javascript实现隔行变色 < ...

  2. Dynamic CRM 2013学习笔记(二)插件基本用法及调试

      插件是可与 Microsoft Dynamics CRM 2013 和 Microsoft Dynamics CRM Online 集成的自定义业务逻辑(代码),用于修改或增加平台的标准行为.也可 ...

  3. Dynamic CRM 2013学习笔记(一)插件输入实体参数解析

      1. 问题描述 最近新建了一个post事件的插件,传入的参数处理如下: 1: if (context.InputParameters.Contains("Target") &a ...

  4. Qt Creator 源码学习笔记04,多插件实现原理分析

    阅读本文大概需要 8 分钟 插件听上去很高大上,实际上就是一个个动态库,动态库在不同平台下后缀名不一样,比如在 Windows下以.dll结尾,Linux 下以.so结尾 开发插件其实就是开发一个动态 ...

  5. 表单提交学习笔记(一)—利用jquery.form提交表单(后台.net MVC)

    起因:一开始想用MVC本身的Form提交方法,但是提交完之后想进行一些提示,MVC就稍显不足了,最后用jquery插件---jquery.form.js,完美解决了问题~~ 使用方法 一.下载jque ...

  6. Angular2学习笔记(1)

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  7. bootstrap学习笔记之四(javascript插件)

    下面展现四个插件的用法,一般插件的功能可以用两种方法实现,一种是引入bootstrap.js后,通过添加data属性实现,另一种则是通过js代码是实现. 第一个插件:下拉菜单的实现 第一种方法:dat ...

  8. angular2 学习笔记 ( rxjs 流 )

    RxJS 博大精深,看了好几篇文章都没有明白. 范围牵扯到了函数响应式开发去了... 我对函数式一知半解, 响应式更是第一次听到... 唉...不过日子还是得过...混着过先呗 我目前所理解的很浅,  ...

  9. Angular2学习笔记2

    每个angular2应用程序默认使用app目录来创建(可以自己制定,但是eclipse插件生成的会自动使用app) 每个程序应当至少有一个angular模块即根模块.根模块使用@NgModule({} ...

随机推荐

  1. 数据处理框架:Pig

    Pig pig 是基于hadoop的一个数据处理框架. MapReduce是使用java开发的.Pig有一套自己的数据处理语言.Pig的数据处理过程要转化为MR 来运行. Pig的数据处理语言是数据流 ...

  2. 关于slmgr命令

    需要管理员的权限运行.这个命令可以用来卸载系统的序列号.使系统处于未激活状态.

  3. leaflet渲染mapbox gl的矢量数据

    准备条件 1.mapbox-gl.js mapbox-gl.css 2.leaflet-mapbox-gl.js https://github.com/mapbox/mapbox-gl-leaflet ...

  4. pt工具主从一致性检查并修复以及版本3.0.4的版本缺点

    pt-table-checksum和pt-table-sync分别检验master-slave的数据不一致并修复. 1.本次测试环境 [root@172-16-3-190 we_ops_admin]# ...

  5. Python基础-week04

    本节内容摘要:#Author:http://www.cnblogs.com/Jame-mei 装饰器 迭代器&生成器 Json & pickle 数据序列化 软件目录结构规范 作业:A ...

  6. Database operations of Mysql

    update 表名 set 字段名=replace(同一个字段名,原字符串,新字符串);  --修改记录. 一.初始化 # cd /usr/local/mysql # chown -R mysql:m ...

  7. 笔记:XML-解析文档-DOM

    要处理XML文档,就要先解析(parse)他,解析器时这样一个程序,读入一个文件,确认整个文件具有正确的格式,然后将其分解成各种元素,使得程序员能够访问这些元素,Java库提供了两种XML解析器: 像 ...

  8. Linux 如何使用echo指令向文件写入内容

    0.前言     本文总结如何使用echo命令向文件中写入内容,例如使用echo指令覆盖文件内容,使用echo指令向文件追加内容,使用echo指令往文件中追加制表符.     echo向文件中输出内容 ...

  9. 【Bootstrap】bootstrap-datetimepicker日期时间插件

    [bootstrap-datetimepicker] datetimepicker是一个比较方便的日期时间插件.有了这个之后,我们可以在类似于表单的地方提供一个友好的日期(时间)输入功能.官方文档:[ ...

  10. .NET Core快速入门教程 5、使用VS Code进行C#代码调试的技巧

    一.前言 为什么要调试代码?通过调试可以让我们了解代码运行过程中的代码执行信息,比如变量的值等等.通常调试代码是为了方便我们发现代码中的bug.ken.io觉得熟练代码调试技巧是成为合格程序员的基本要 ...