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 

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
<textarea #ck (focus)="touch()" >
</textarea>  
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();
}

 

關鍵詞:ckeditor this npm editor import jquery angular install save value

相關推薦:

草稿 富文字編輯器

ckeditor_學習(1) 基本使用

織夢ckeditor編輯器 通過修改js去除img標籤內的width和height樣式

ckeditor + ckfinder + oss儲存

Django 2.0 admin後臺管理介面修改和新增富文字編輯器

JS獲取CkEditor線上編輯的內容

富文字

富文字編輯器 CKeditor 配置使用+上傳圖片

CkEditor - Custom CSS自定義樣式

關於ckeditor貼上圖片自動上傳