操作目錄：
注意事項:
- 請勿直接複製其他網頁或是檔案內容貼上編輯器，請使用純文字貼上按鈕來貼入內容後再上圖，以免帶到其他語法造成跑版或是顯示異常。
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嵌入的影片，後面的圖片及內文不見了？
原因 : 因為圖片及內文被影片語法包住，導致下方內容無法顯示。
點擊原始碼，將除了影片以外的<div>語法刪除
※紅色框框刪除
※藍色框框改成<p> 及 </p>
只要是文字或是圖片，前面都使用p語法 注意:影片前面( < iframe >前面) 的< div > 語法不可以拿掉喔！
【狀況2】 : youtube嵌入的影片無法隨螢幕縮放，手機版會爆出去，或是顯示太小了？
原因 : 因為youtube嵌入的影片被圖片或是文字的語法 <p>包住了。
1. 請點擊原始碼
2. 將紅匡的 <p> 改成 <div class=”embed-responsive embed-responsive-16by9″>
3. 藍匡的 </p> 改成 </div>
【狀況3】 : 商品頁面跑版或是編輯器內容預覽看不到(前台顯示正常)？
原因 : 因為商品頁編輯器中的 <style type=”text/css”>p, li { white-space: pre-wrap; } < /style> 語法導致跑版。
● 通常比較常發生在，從其他網站複製內容貼到編輯器時發生，因為會帶到其他網站的語法。
解決方法 :
1. 請點擊原始碼
2. 找到 <style type=”text/css”>p, li { white-space: pre-wrap; } < /style > 的語法，刪掉這段即可
