CKEditor 5 教學 (四)，如何顯示編輯好的文章
當文章編輯好之後按下儲存送出，接下來就要來查看編輯好的文章內容啦！
這時候如果你開啟文章顯示的頁面，你會發現剛剛編輯的效果並沒有完整顯示出來，像是馬克筆沒有顏色。如果你有插入影片的話，甚至連影片都看不到。
想要正確的顯示效果，就必須套用正確的 CSS。
本文會介紹如何產出用來顯示 CKEditor 編輯文章的 content-styles.css
還有如何在文章中顯示插入的影片連結。
關於 CKEditor 的基礎使用方法，可以查看前幾篇文章的介紹：
產出顯示文章的 content-style.css
首先我們先把 CKEditor 檔案 Clone 下來。
git clone https://github.com/ckeditor/ckeditor5.git然後進入 ckeditor5 的資料夾。
cd ckeditor5使用 yarn 來安裝 CKEditor 所有 npm 套件。
yarn install什麼是 yarn ? 其實 yarn 跟 npm 一樣，都是 node 的套件管理工具，yarn 解決了 npm 的一些缺點。由 Facebook 開源並維護。
這個時候我們就可以產出顯示 CKEditor 編輯文章的 CSS 檔案。
yarn docs:content-styles此時會產出一個 CSS 檔案 ckeditor5/build/content-styles/content-styles.css。
這時只要在顯示文章的頁面中引入這個 content-style.css。
<link rel="stylesheet" href="檔案位置/css/content-styles.css" type="text/css">並且在文章顯示區塊的 class name 中加上 ck-content。文章中編輯的效果就可以正確顯示了！
顯示文章中的影片連結
官方在文檔中說明可以使用兩種不同的 API 來顯示影片連結
本文使用第二個，因為很簡單。只要在顯示文章的頁面引入 embedly 的 JS 檔案即可。
<head>
...
<script async charset="utf-8" src="//cdn.embedly.com/widgets/platform.js"></script>
...
</head>這時就可以觀看文章中插入的影片了！
