最近在找一個富文本編輯器，找來找去，不是太醜，就是太過於陳舊，不利於在vue或者其他js前端框架中移植。不過還好最終找到了ckeditor5，顏值和功能都很讓我滿意，比較噁心的就是文檔只有英文的，而且整個api的文檔，根本不知道該看哪。在耗費了一天的功夫看文檔以後，我決定還是自己來整理一份速查手冊類似的文檔，以方便大家如果有使用富文本編輯器的需要，也可以有一個參考。這裡是ckeditor5系列文章的第一篇《基礎使用》。
其實ckeditor是一個老項目了，但是相對於其他的編輯器，它是一直在保持更新的，目前最新的版本就是ckeditor 5，這裡以經典編輯器樣式（Classic Editor）來做介紹，其他（Inline, Ballon,Document）與此相同。
效果截圖
一、安裝
官方提供三種方式安裝：
- CDN
- npm
- zip壓縮包下載
1、CDN
CDN結構：
其中的version.number，distribution需要替換成你要使用的版本號和編輯器類型，版本號請到官網查詢，編輯器類型可以參照下面：
- classic - the Classic editor
- inline - the Inline editor
- balloon - the Balloon editor
- decoupled-document - the Document editor
2、npm
這個沒有什麼好說，直接執行npm命令即可。
npm install --save @ckeditor/ckeditor5-build-classic
# Or:
npm install --save @ckeditor/ckeditor5-build-inline
# Or:
npm install --save @ckeditor/ckeditor5-build-balloon
# Or:
npm install --save @ckeditor/ckeditor5-build-decoupled-document
3.zip包下載
點擊下載ckeditor壓縮包
二、基礎使用
快速在自己的網頁裡放入編輯器還是比較簡單的，只需要以下一個步驟：
1、html中添加一個元素用來放編輯器
3、調用ClassicEditor.create方法，來初始化編輯器
4、完整例子
CKEditor 5 – Classic editor
Classic editor
這樣，ckeditor5就出現在我們的頁面中了～～～
分享到:
閱讀更多 ian有話說 的文章
