angular 项目中需要一个富文本编辑器，研究了好几个之后，找到了 ng2-ckeditor 这款编辑器。界面简洁干净，功能也比较齐全，也还在不断更新。
先上来自官网的图：
ng2-ckeditor 界面图
angular4 使用方法很简单，下面是步骤：
首先，下载 ng2-ckeditor 到angular项目中：
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版本，这两个版本有一些区别，个人建议用新版本，新版本的地址是ckdeitor CDN。旧版本的功能参考文件比较多，但是样式的话还是新版本比较好看，虽然样式只是一件小事。
再来就是添加模块到项目的主模块中：
import{ CKEditorModule }from'ng2-ckeditor';
@NgModule( { imports: [ CKEditorModule, ...], ... })
最后就是使用方法了，这个插件的使用方法非常的简单，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 = '';
最后结果展示：
ng2-ckeditor 编辑器的使用
参考文章：
github地址：https://github.com/chymz/ng2-ckeditor
网上在线编辑地址：https://embed.plnkr.co/hnB0R3/
官方文档：https://docs.ckeditor.com/
ckeditor详细配置与使用说明： http://blog.csdn.net/gavid0124/article/details/52092308
网友评论