博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
angular2 学习笔记 ( 第3方插件 jQuery and ckeditor )
阅读量:6206 次
发布时间:2019-06-21

本文共 2608 字,大约阅读时间需要 8 分钟。

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;  }}
View Code
View Code

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

 

转载于:https://www.cnblogs.com/keatkeat/p/6512673.html

你可能感兴趣的文章
hdu5424 Rikka with Graph II
查看>>
关于有多少个1的计算
查看>>
js里的数据类型转换
查看>>
Hbase java api
查看>>
CentOS6.5安装配置
查看>>
SOM 的两种算法
查看>>
实现权重计算
查看>>
[10.5模拟] dis
查看>>
leetcode1042
查看>>
发手气红包算法
查看>>
JAVA基础----java中E,T,?的区别
查看>>
Java多线程并发学习-进阶大纲
查看>>
源码安装LNMP
查看>>
修改JAVA代码,需要重启Tomcat的原因
查看>>
OpenCV笔记(十五)——使用Laplace算子进行图像的边缘检测
查看>>
Mac下关于->您不能拷贝项目“”,因为它的名称太长或包括的字符在目的宗卷上无效。<-的删除...
查看>>
android 面试总结,后续注意学习
查看>>
学习笔记之-------UIScrollView 基本用法 代理使用
查看>>
PHP array_count_values() 函数用于统计数组中所有值出现的次数。
查看>>
PHP笔记随笔
查看>>