CKEDITOR-文章編輯器教學

功能說明：

1.如何使用CKEditor(文章編輯器)設計銷售頁、著陸頁。

2.文字、圖片及影片上傳教學，含建議規格。

3.應用範圍：商品頁、商品群組、活動頁（一頁商店）、定期定額、部落格、其他頁

面等。

操作目錄： CKEditor 介紹 文字 圖片上傳 – 尺寸規格 – 個別/批次上傳 – 常見問題-移除圖片之間空白格 影片上傳

---

CKEditor 介紹

後台路徑 :「商品」→「所有商品」→「商品管理」→「商品描述」

以商品介紹為例，【規格說明】、【運送方式】設定方式皆相同。

【文字】

在CKEditor 中編輯的文字，可直接視為前台頁面顯示的預覽圖。

此為功能簡單範例

*若使用其他文字軟體匯入 CKEditor (如: Office)，格式須符合CKEditor 制定格式。

進階設定教學。

【圖片上傳】

·尺寸規格

圖片上傳限制:2mb/每次上傳量

圖片 SEO 請至 SEO 優化教學 做設定。

*圖片寬度超過 1110 px 會自動壓縮至 1110 px

·製作長幅產品圖建議

1. 一張圖完成。(不會有空格問題，但要注意圖片上傳大小) 寬度 1000 px / 長度不限

2. 多張圖拼湊。(圖片檔案小，但要注意圖片尺寸是否可達成無縫長條圖) 寬度 1000 px / 長度1000 px

前台畫面顯示

【影片上傳】

1.影片相關設定 請至 影片自動播放+特定播放時間設定教學

2.前台畫面顯示

常見問題- 圖片之間有空白格

原因 : 若逐一上傳並在照片之間按下 ENTER鍵，則網頁顯示會多一行空白格。

解決方案

進入後台點選「原始碼」

刪除後中間的 P 就不會再出現空白格。

*此解法僅能解決圖片可自動換行的情況。

範例 :

A : 兩張圖片寬度皆為 300 px ，則無法透過程式碼將空白格刪除，圖片之間必有空白。

B : 兩張圖片寬度皆為 1000 px ，若圖片之間按下 ENTER 後，可利用程式碼來將空白格刪除。