富文本编辑器ckeditor使用（angular中）

1、下载ckeditor

地址：https://ckeditor.com/ckeditor-4/download/，选择合适的版本

2、将下载的压缩文件解压后放在项目相关目录下

3、在index.html中引入

<!-- 引入ckeditor -->

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

4、在需要使用富文本编辑器的html文件中写

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

5、在ts文件中

content = '';

config: any = {

// 文件上传路径

/* filebrowserUploadUrl : `/api-admin/admin/public/flashUpload`,*/

// 图片上传后端url

filebrowserImageUploadUrl: `/api/cas/patent/weixin/admin/upload/ckEditorWindowUpload?id=1`, // 打开窗口上传

uploadUrl: `/api/cas/patent/weixin/admin/upload/ckEditorDropUpload?id=1`, // 拖拽上传

image_previewText: ' ',

// html5video上传url

filebrowserHtml5videoUploadUrl: `/api/cas/patent/weixin/admin/upload/ckEditorUploadVideo?id=1`,

// flash上传后端url

// filebrowserFlashUploadUrl:`/api-admin/admin/public/flashUpload`,

// audio上传url

// filebrowserAudioUploadUrl:`/api-admin/admin/public/flashUpload`,

// 其他插件,字数统计，提示信息

// extraPlugins: `widget,html5video,emojione,video,audio,

// image2,wordcount,notification,notificationaggregator`,

};

6、添加yarn add ng2-ckeditor --save

在需要调用的模块引入CKEditorModule

import { CKEditorModule } from 'ng2-ckeditor';

7、富文本编辑器中相关操作依赖的文件

具体参考：https://blog.csdn.net/sinat_31986807/article/details/79667543