Angular集成ckeditor

新建angular项目（已存在项目可以忽略这一步）

ng new ckeditortest

引入ckeditor 包

参考： https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html

npm 引入

npm install --save @ckeditor/ckeditor5-angular

ckeditor功能定制

ckeditor功能是由插件实现的。

官方实现

ckeditor提供了5种基础的功能实现（可以引入相应的npm包）参考：https://ckeditor.com/docs/ckeditor5/latest/examples/index.html

用户定制

同时还可以自己定制功能，ckeditor提供了在线生成器
https://ckeditor.com/ckeditor-5/online-builder/

1.选择基础模板

官方提供的5个基础功能有什么区别，可以看官方demo https://ckeditor.com/ckeditor-5/demo/

image.png

2.选择插件

image.png

3.配置菜单

image.png

4.选择语言

image.png

5.下载

image.png image.png

angular项目配置

1.复制editor文件

把build下的editor.js文件复制到angular项目中

image.png

2.复制config（也可以自己配置，建议复制）

打开sample/index.html文件

image.png
image.png

3.引入editor

ckeditor.js是第一步复制过来的文件

image.png

4.引入editor组件

image.png image.png

5.启动项目

npm start

image.png

显示

编辑后的富文本显示

1.获取富文本内容并展示

ckeditor组件支持模板form和响应式form

image.png

出现的问题：

image.png
注意红色部分没有显示，这是因为没有引入样式，可以全局引入
参考：
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/content-styles.html
image.png
ckeditor-styles.css内容
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/content-styles.html#the-full-list-of-content-styles image.png

这时候样式就好了

image.png

关于上传图片，请参考：

https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/image-upload.html
网上也有很多文章，我这里先不写了（其实是我也没太研究明白）

demo源码：
https://github.com/wenyu7980/ckeditortest