angular4 富文本编辑器 ng2-ckeditor 的使用

angular 项目中需要一个富文本编辑器，研究了好几个之后，找到了 ng2-ckeditor 这款编辑器。界面简洁干净，功能也比较齐全，也还在不断更新。

先上来自官网的图：

ng2-ckeditor 界面图

angular4 使用方法很简单，下面是步骤：

首先，下载 ng2-ckeditor 到angular项目中：

npm install ng2-ckeditor --save    ( 或者 cnpm install ng2-ckeditor --save）

然后，添加 ckeditor.js 到index.html中：

这里是引用的目前最新的版本，在 ng2-ckeditor 中建议引用的是4.5.11版本，这两个版本有一些区别，个人建议用新版本，新版本的地址是ckdeitor CDN。旧版本的功能参考文件比较多，但是样式的话还是新版本比较好看，虽然样式只是一件小事。

再来就是添加模块到项目的主模块中：

import{ CKEditorModule }from'ng2-ckeditor';

@NgModule( { imports: [ CKEditorModule, ...], ... })

最后就是使用方法了，这个插件的使用方法非常的简单，HTML代码只有一段：

在 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