angular 項(xiàng)目中需要一個(gè)富文本編輯器愕秫，研究了好幾個(gè)之后焰络，找到了 ng2-ckeditor 這款編輯器。界面簡潔干凈舔琅，功能也比較齊全洲劣，也還在不斷更新课蔬。
先上來自官網(wǎng)的圖：
angular4 使用方法很簡單二跋，下面是步驟：
首先流昏，下載 ng2-ckeditor 到angular項(xiàng)目中：
npm install ng2-ckeditor --save ? ?( 或者 cnpm install ng2-ckeditor --save）
然后，添加 ckeditor.js 到index.html中：
<script src="https://cdn.ckeditor.com/4.7.2/standard/ckeditor.js"></script>
這里是引用的目前最新的版本谚鄙，在?ng2-ckeditor?中建議引用的是4.5.11版本刁绒，這兩個(gè)版本有一些區(qū)別，個(gè)人建議用新版本知市，新版本的地址是ckdeitor CDN。舊版本的功能參考文件比較多娘赴，但是樣式的話還是新版本比較好看跟啤，雖然樣式只是一件小事诽表。
再來就是添加模塊到項(xiàng)目的主模塊中：
import{ CKEditorModule }from'ng2-ckeditor';
@NgModule( { imports: [ CKEditorModule, ...], ... })
最后就是使用方法了，這個(gè)插件的使用方法非常的簡單关顷，HTML代碼只有一段：
<ckeditor name="ckeditor"id="ckeditor" ?[(ngModel)]="editContent" ?debounce="500" [config]="config"> </ckeditor>
在 ts 中代碼是：
protected ?config: any= {
uiColor: '#F8F8F8', ? // 編輯框背景色
language: 'zh-cn', ?// 顯示語言
toolbarCanCollapse: true, ?// 是否可收縮功能欄
toolbar: [ ['Maximize'],['Undo','Redo','-','Cut',' Copy','Paste', 'PasteText', 'PasteFromWord','-','Link','Unlink','Anchor','-','Image','Table','HorizontalRule','Smiley','SpecialChar','-','Source'], ['Bold','Italic','Underline','Strike','-','Subscript','Superscript','-','NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], ['Styles','Format','Font','FontSize'] ] ?// 工具部分
};
protected editContent: string = '';
最后結(jié)果展示：
參考文章：
github地址：https://github.com/chymz/ng2-ckeditor
網(wǎng)上在線編輯地址：https://embed.plnkr.co/hnB0R3/
官方文檔：https://docs.ckeditor.com/
ckeditor詳細(xì)配置與使用說明： http://blog.csdn.net/gavid0124/article/details/52092308
