300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > angular8 富文本编辑_富文本编辑器ckeditor使用(angular中)

angular8 富文本编辑_富文本编辑器ckeditor使用(angular中)

时间:2024-04-27 20:18:12

相关推荐

angular8 富文本编辑_富文本编辑器ckeditor使用(angular中)

1、下载ckeditor

地址:/ckeditor-4/download/,选择合适的版本

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

3、在index.html中引入

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

debounce="500"

[config]="config">

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 addng2-ckeditor --save

在需要调用的模块引入CKEditorModule

import { CKEditorModule } from ‘ng2-ckeditor‘;

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

具体参考:/sinat_31986807/article/details/79667543

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。