CKEditor 5 教學 (四),如何顯示編輯好的文章

程式技術
sharkHead

當文章編輯好之後按下儲存送出,接下來就要來查看編輯好的文章內容啦!

這時候如果你開啟文章顯示的頁面,你會發現剛剛編輯的效果並沒有完整顯示出來,像是馬克筆沒有顏色。如果你有插入影片的話,甚至連影片都看不到。

想要正確的顯示效果,就必須套用正確的 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>

這時就可以觀看文章中插入的影片了!

參考資料

sharkHead
written by
sharkHead

後端打工仔,在下班後喜歡研究各種不同的技術。稍微擅長 PHP,並偶爾涉獵前端開發。個性就像動態語言般隨興,但渴望做事能像囉嗦的靜態語言那樣嚴謹。

0 則留言