Angular
前言
- 由于項目需要在頁面中嵌入一個文本編輯器，因為之前的項目里用的是Ckeditor，所以我現(xiàn)在的項目里也就使用了Ckeditor，然而，卻發(fā)現(xiàn)在Angular項目中使用Ckeditor是一個錯誤的決定，但是，憑借老夫強大的不服輸?shù)囊庵玖μ羁友a坑，最后也算是基本上滿足了需求。
1.安裝
- 官網(wǎng)在此，如果是普通的非Angular項目，使用起來會更容易一些，下載壓縮文件，然后引入相關文件即可使用。但是要是沒自己操作過，我是沒有發(fā)言權的，只能說在Angular項目中引入并使用都是一個巨坑。
- 按照文檔中的步驟是下載并在項目中引入ckeditor.js文件，然后調用一個replace方法即可，然而還是太年輕，在Angular項目中這種方法行不通。行不通怎么辦呢，另想辦法，然后在文檔中找到了配置CND來使用該編輯器的方法，然后反復折騰之后發(fā)現(xiàn)有兩種方式可以在Angular項目中使用，但前提是必須使用CND，需要在index.html中配置引入如下聲明：
<script src="https://cdn.ckeditor.com/4.7.3/standard/ckeditor.js"></script> - 然后還需要下載ng2-ckeditor的組件，在項目目錄下
npm install ng2-ckeditor一下即可安裝，因為還需要在項目中使用到CKEDITOR這樣的變量，需要安裝組件來引用該變量，安裝之后，該變量的聲明和在Angular項目中引入jQuery的$一樣，在最后一個import后面declare var CKEDITOR: any即可使用。
2.使用
- 現(xiàn)在，CND和CKEDITOR都已經(jīng)引入了，在你的項目中可以開始使用了，因為安裝了ng2-ckeditor的組件，所以有兩種使用方式。
方法一
- 其一是普通的項目使用的方式，如下代碼所示：
<textarea name="editor1" id="editor1">
This is my textarea to be replaced with CKEditor.
</textarea> - 在html文件中放以上代碼，然后在ts文件中初始化函數(shù)ngOnInit()中使用
CKEDITOR.replace( 'editor1' );即可生效，效果圖如下：
Ckeditor - 當然，沒有配置過的原始狀態(tài)不是這樣的，這是我自己根據(jù)需求重新配置后的,這里是一個Angular項目中使用CKEDITOR的Demo，沒有配置的原始樣子就是Demo中的一大堆密集可怕的按鈕。
方法二
- 方法二是使用比較Ng風格的方式，Github上的ng2-ckeditor文檔講的很詳細，不懶的朋友可以仔細閱讀，避免入坑。懶的朋友請看這里，安裝了ng2-ckeditor之后，還需要在根模塊app.module.ts中引入并聲明你要使用這個東西了，然后就可以在項目中使用了。
- 引入：
import { CKEditorModule } from 'ng2-ckeditor'; - 聲明：
imports: [ CKEditorModule] - 接下來就可以在項目使用了，在html文件中寫下如下代碼：
<ckeditor debounce="500" [config]="config"></ckeditor> - 簡單方便，保存之后到瀏覽器中即可查看。debounce是延遲0.5秒加載，config是你自己的配置項，需要在ts文件中配置好。
- 還可以自定義按鈕，定制化功能，如下，在<ckeditor>標簽中插入一個<ckbutton>標簽即可，多個的話用一個<ckgroup>標簽把多個<ckbutton>包裹起來即可。這樣，你的編輯器中就可以顯示你自己定義的按鈕了。
<ckeditor debounce="500" [config]="config">
<ckbutton [name]="'dynamicVar'"
[command]="'openDynamicVar'"
(click)="openDynamicVar($event,template)"
[icon]="'/assets/var.gif'"
[label]="'Get Variables'"
[toolbar]="'document,1'">
</ckbutton>
</ckeditor>
3.入坑
- 上述兩種方法看起來貌似都挺好的，用起來也簡單方便，但是，要是真這么容易的話，還談什么入坑。
- 第二種比較ng風格的就有肯多bug，首先是*ngFor不能使用，還有一個editor-destroy-iframe的錯誤，按照風騷作者（他頭像就是一臉風騷的樣子）給出的解決方案試了一下，就是加了句
extraPlugins: 'divarea'在配置里面，然鵝，雖然順利解決了這兩個問題，但是又引入了一個棧溢出的內存爆掉問題，然后去GitHub上開了issue問風騷的作者，但是沒有回復，所以放棄了這種方式。 - 最后用了第一種非組件化的方法，由于我要實現(xiàn)的是一個自定義的按鈕彈出框，其中也是遇到許多坑，但是也算是一個升級打怪的學習過程，收獲不少。
結語
- 前端Angular打怪升級中，業(yè)余寫寫學習筆記，記錄并分享學習心得，歡迎騷擾討論技術問題。
