新建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
网上也有很多文章，我这里先不写了（其实是我也没太研究明白）
网友评论