AngularJS6+SpringBoot1.5.15前后端分离SPA博客系统实战《六》

1.富文本编辑器ng2-ckeditor引入及使用。

(1).npm引入ng2-ckeditor插件。

npm install ng2-ckeditor@1.2.2 --save

(2).下载CKEditor插件。

CKEditor官网: https://www.ckeditor.com 

CKEditor插件列表: https://ckeditor.com/cke4/addons/plugins/all

百度网盘地址：https://pan.baidu.com/s/1LzTV27vSwYo6ton_wDAWtA  提取码: 5pk7

（3）.项目引入CHEditor插件。

将第（2）步下载得到的压缩包解压放到assert目录下，并且在入口页index.html添加如下代码引入插件：

<script src="assets/ckeditor/ckeditor.js"></script>

（4）.app.module.ts模块文件添加ChEditory插件引入。

import {CKEditorModule} from 'ng2-ckeditor';
@NgModule({
    imports: [
        xxx..,
        CKEditorModule,
    ]

（5）.需要使用插件的html添加如下代码。

<!-- 富文本框 -->
<ckeditor [(ngModel)]="article.content" debounce="500" [config]="config"></ckeditor>

（6）.最终效果。