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).最终效果。