富文本编辑器ckeditor使用angular中

1、下载ckeditor

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

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

3、在index.html中引入

<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

富文本编辑器ckeditor使用angular中

相关文章