CKEDITOR-文章編輯器教學

功能說明：

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

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

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

操作目錄：

CKEditor 介紹

文字

圖片上傳

– 尺寸規格

– 個別/批次上傳

– 常見問題-移除圖片之間空白格

影片上傳

常見問題

狀況一 :

youtube嵌入的影片，後面的圖片及內文不見了？

狀況二 :

youtube嵌入的影片無法隨螢幕縮放，手機版會爆出去，或是顯示太小了？

狀況三 :

商品頁面跑版或是編輯器內容預覽看不到(前台顯示正常)？

注意事項:

請勿直接複製其他網頁或是檔案內容貼上編輯器，請使用純文字貼上按鈕來貼入內容後再上圖，以免帶到其他語法造成跑版或是顯示異常。

CKEditor 介紹

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

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

【文字】

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

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

進階設定教學：

如有需求可參考 錨點教學影片。

【圖片上傳】

圖片尺寸與上傳限制

上傳限制：單次上傳總量不得超過 2MB

圖片寬度限制：最大 5000px，超過 1110px 會自動壓縮至 1110px

圖片長度限制：不得超過 7000px

SEO 設定：可參考 SEO 優化教學 進行設定。

長幅產品圖製作建議

您可依需求選擇以下兩種方式製作長條產品圖：

單張圖片（推薦）

優點：可避免拼接空隙問題。

請控制檔案大小。

建議尺寸：寬度 1000px，長度不限。

多張拼接圖

優點：各圖檔較小，利於上傳。

請統一尺寸以達成無縫拼接效果。

建議尺寸：每張寬度 1000px × 長度 1000px。

個別/批次上傳

可選擇透過 CKEditor 圖片按鈕逐一上傳，也可透過資料夾一次上傳圖片。

個別上傳

批次上傳

前台畫面顯示

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

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

解決方案

進入後台點選「原始碼」。

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

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

範例 :

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

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

設定完成。

【影片上傳】

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

前台畫面顯示

常見問題

【狀況1】 : youtube嵌入的影片，後面的圖片及內文不見了？

原因 : 因為圖片及內文被影片語法包住，導致下方內容無法顯示。

解決方法 :

點擊原始碼，將除了影片以外的