在後台可以看到有像這樣的 HTML 編輯器，商家使用電腦、平板、或手機皆可以編輯
許多商家會在這個區域放入文字、插入圖片、或影片等，製作更多吸引人的內容，展示商店特色。
本篇部落格會說明如何使用後台的 HTML 編輯器。
後台哪裡可以看到 HTML 編輯器？
- 「商品登錄」：商品說明
- 「商店設定」：關於、付款方式說明、寄送方式說明、訂單查詢/異動說明、售後服務說明、隱私權條款
- 「商家活動」：商家活動的活動說明、現金積點規則說明
- 「會員管理」：會員權益說明
- 「文章管理」：自訂頁面編輯、部落格編輯
HTML 編輯器可以做什麼事情？
除了文字的編輯、排版功能之外，這個區域還可以...
一、插入圖片
如果要在後台 HTML 編輯器中的插入圖片，必須先將圖片上傳至網路圖床空間 (如：funto 圖床等)，且圖片需要有 SSL 安全憑證加密，才能將圖片以圖片位址的方式，插入到編輯器中。下方將說明不同插入圖片的方法：
方法 1：網路圖床
請先將圖片上傳到網路圖床，再將滑鼠移至圖片上方，接著「點擊滑鼠右鍵👉複製圖片位址」，再接圖片位址貼到後台 HTML 編輯器中，即可完成圖片插入。
📌 插入圖片需使用「圖片位址」，不能使用瀏覽器上方網址列的網址，圖片會無法正常顯示。
📌 圖片位址須以 https:// 開頭，並以 jpg、.gif 等圖檔格式結尾。
📌 如果使用免費的網路圖床，可能會有圖片無法正常顯示或圖片遺失等等的不穩定狀況，建議使用安全、穩定的付費圖床。
-
插入圖片流程
1. 進入 HTML 編輯器中，點選「插入/編輯圖片」
2. 將剛剛複製的圖片位址貼上，按「儲存」
📌 確認所插入的圖片有完整顯示在編輯器中，這樣就完成囉！
📌 若插入後發現顯示 □，或圖片有無法呈現的狀況，請檢查圖片網址是否有完整複製。
方法 2：Funto 雲端圖床
若後續商店穩定，可購買穩定性高、且有安全加密過的圖床空間，無須複雜的上傳，就像從電腦選擇圖片上傳一樣輕鬆簡單。
想了解更多可點此進入 FunTo 雲端圖床 介紹。
圖片並排顯示怎麼做?
有些店家希望圖片在電腦和手機裝置中，都可以正常的縮放，整齊的左右並排顯示。
可以以表格的方式先畫出圖片要呈列的方式，再從表格中插入圖片，排版好的內容就可以縮放自如，不會跑版囉！
1.請先插入表格
2. 在表格屬性設定「框線寬度為0」，表格在商店顯示時就不會有框線。
3. 在表格中點擊滑鼠左鍵，游標停在表格中，接著插入圖片。
4. 圖片就會以並排的方式呈現在商店中囉!
二、插入影片
如果要插入影片，必須先將影片上傳到 Youtube ，再以網址或嵌入程式碼的方式插入影片到編輯器中。
以下有兩種方式可以插入影片：
一般影片網址
使用影片網址插入影片時，在 Youtube 能設定影片開始撥放的時間點。
1. 將影片上傳至 Youtube
2. 點擊「分享」
3. 設定「開始處」的時間點，接著複製影片網址
📌 開始處：影片開始撥放的時間點，通常用於影片長度較長，但希望消費者瀏覽的內容位置在影片中間或尾端時，就可以設定消費者撥放時，開始撥放的時間點，讓消費者可以快速觀看到影片重點。
4. 進入 HTML 編輯器中，點選「插入/編輯 媒體」
5. 選擇「一般」，貼上剛剛所複製的影片網址，按「儲存」，即完成影片插入。
嵌入碼
使用嵌入碼插入影片時，可以編輯顯示撥放器控制選項、隱私權加強保護、影片撥放的開始處時間點，下方將會一一說明。
1. 將影片上傳至 youtube
2. 點擊「分享」
3. 選擇「嵌入」
4. Youtube 影片設定
顯示撥放器控制選項：左下角可以點擊連結至 Youtube 觀看影片。
📌 店家有在經營 Youtube 想推廣頻道，可以勾選這個選項，讓消費者至 Youtube 瀏覽更多的商店影片。
📌 如果想避免消費者至 Youtube 觀看影片後，未回到商店下單，建議可以不要勾選此選項喔!
啟用隱私權加強保護模式：勾選時，只有當消費者在商店中瀏覽影片時，Youtube 才會記錄消費者相關資訊。
開始處：勾選時，影片會從指定的時間點開始撥放，通常用於影片長度較長，但希望消費者瀏覽的內容位置在影片中間或尾端時，就可以設定消費者撥放時，開始撥放的時間點，讓消費者可以快速觀看到影片重點。
完成影片設定後，「複製」嵌入程式碼，回貼到 WACA 後台。
5. 進入 HTML 編輯器中，點選「插入/編輯 媒體」
6. 選擇「嵌入碼」貼上後，並儲存
📌確認所插入的影片有完整顯示在編輯器中，這樣就完成囉！
📌若插入後發現顯示 □，或影片有無法呈現的狀況，請檢查影片網址是否有完整複製。
三、嵌入Instagram貼文
找到你想嵌入的IG貼文，點選右上角，選擇「內嵌」
複製內嵌程式碼
回到後台，點選編輯器上IG的小圖示。
在編輯視窗中，貼上剛剛複製的內嵌程式碼，點選「確定」。
貼文就會出現在編輯器中，再點選「儲存」後，就能在商店前台文章中看到內嵌的IG貼文囉！
四、自行編寫 html tag
需要注意以下幾點：
● HTML編輯器只允許使用html tag，以及HTML編輯器內所提供的樣式排版功能。
● 其它如 ＜script＞、 ＜style＞、 ＜link＞、行內css、id、class...等，一律篩選過濾移除，只保留合法的html tag。
● 如使用表單功能，只限使用 iframe 方式嵌入，建議使用 google 表單來完成。
五、了解其他編輯器功能
● 超連結：
* 使用情況
→ 文字、圖片點擊後要連結至其他網頁。
如：line 加入好友 + line 分享邀請連結。
* 使用方式
→ 文字、圖片放入 HTML 編輯器後，選擇要加上超連結的內容，點選「超連結」，再把連結網址貼上。
● 消除格式：
* 使用情況
- 原文字資料複製貼上時，夾雜格式排版，想貼上乾淨的 (無格式) 文字時使用。
- 編輯後，發現商店前台圖片之間有大量空白。
* 使用方式
- 選擇要消除格式的區域後，點選「清除格式」 。
舉例來說，很多店家會以 Word 等文書軟體編輯商店內容，再貼到 HTML 編輯器中，此時就會有跑版的狀況。
此時請點選「清除格式」，將文書軟體的原始碼移除，再透過 HTML 編輯器重新排版，在商店呈現時，就不會有跑版的狀況。
● 智慧斷行：
* 使用情況
- 換段落時，下個段落還夾雜著上個段落的格式，無法消除，想要重新開始一個新段落。
* 使用方式
- 一段落結尾，點「智慧斷行」，就像是點了 Enter 一樣，會自行清除所有格式換到下一個段落，重新開始。
