angular 项目中需要一个富文本编辑器,研究了好几个之后,找到了 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 = '';
最后结果展示:
参考文章:
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