admin 插件资讯 2022-12-11

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 写上

　　CKEDITOR_BASEPATH = ‘/app/ckeditor/’;

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.editorprivate model: string@ViewChild(“ck”, { read: ElementRef }) ck: ElementRefngAfterViewInit() {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: PublishMethodregisterOnChange(fn: PublishMethod): void {this.publish = fn;}private touch: anyregisterOnTouched(fn: any): void {this.touch = fn;}} View Code View Code