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

最新推荐文章于 2025-04-05 09:40:33 发布

weixin_30711917

最新推荐文章于 2025-04-05 09:40:33 发布

阅读量474

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 后端 ViewUI

原文链接：http://www.cnblogs.com/boreguo/p/10558250.html

博客介绍了CKEditor富文本编辑器在项目中的集成步骤，包括从官网下载合适版本，解压文件到项目相关目录，在index.html中引入，在HTML和TS文件中进行相应操作，添加依赖并在模块中引入，还给出了相关操作依赖文件的参考链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、下载ckeditor

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

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

3、在index.html中引入

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.youkuaiyun.com/sinat_31986807/article/details/79667543

转载于:https://www.cnblogs.com/boreguo/p/10558250.html