新建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功能是由插件實現(xiàn)的。
官方實現(xiàn)
ckeditor提供了5種基礎的功能實現(xiàn)（可以引入相應的npm包）參考：https://ckeditor.com/docs/ckeditor5/latest/examples/index.html
用戶定制
同時還可以自己定制功能，ckeditor提供了在線生成器
https://ckeditor.com/ckeditor-5/online-builder/
1.選擇基礎模板
官方提供的5個基礎功能有什么區(qū)別，可以看官方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.獲取富文本內(nèi)容并展示
ckeditor組件支持模板form和響應式form
image.png
出現(xiàn)的問題：
image.png
注意紅色部分沒有顯示，這是因為沒有引入樣式，可以全局引入
參考：
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/content-styles.html
image.png
ckeditor-styles.css內(nèi)容
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
網(wǎng)上也有很多文章，我這里先不寫了（其實是我也沒太研究明白）
