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

sharkHead 程式技術 6個月前 • 0

當文章編輯好之後按下儲存送出,接下來就要來查看編輯好的文章內容啦!
這時候如果你開啟文章顯示的頁面,你會發現剛剛編輯的效果並沒有完整顯示出來,像是馬克筆沒有顏色
如果你有插入影片的話,甚至連影片都看不到
想要正確的顯示效果,就必須套用正確的 CSS 與 JS

本文會介紹如何產出用來顯示 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">

文章中編輯的效果就可以正確顯示了!

 

顯示文章中的影片連結


官方在文檔中說明可以使用兩種不同的 API 來顯示影片連結

本文使用第二個,因為很簡單
只要在顯示文章的頁面引入 embedly 的 JS 檔案即可

<head>
    ...
    <script async charset="utf-8" src="//cdn.embedly.com/widgets/platform.js"></script>
    ...
</head>

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


sharkHead

PHP 與 Python 菜雞工程師
最近在努力學習 TypeScript,希望可以突破慧根的限制