後台 HTML 編輯器

2016-12-12 16:31:00 回應( 商店功能

在後台可以看到有像這樣的 HTML 編輯器。許多商家會希望在這個區域除了用文字,也可以插入圖片、影片等,製作吸引人的內容,放上更多內容、展示商店特色。

本篇部落格會說明如何使用後台的 HTML 編輯器:

 

後台哪裡可以看到 HTML 編輯器?

● 「商品登錄」:商品編輯

● 「商店設定」:關於、付款方式說明、寄送方式說明、訂單查詢/異動說明、售後服務說明、隱私權條款

● 「行銷活動」:任選活動說明、現金積點規則說明

● 「文章管理」:自訂頁面編輯、部落格編輯

 

 

HTML 編輯器可以做什麼事情?

除了文字的編輯、排版功能之外,這個區域還可以...

一、插入圖片

二、插入影片

三、自行編寫 html tag

四、了解其他編輯器功能

 


 

一、插入圖片

後台 HTML 編輯器中的圖片皆需上傳至雲端圖床空間 (如:google 雲端imgurfunto 圖床等,圖片需要有 https 加密),下方將說明不同方法插入圖片的步驟:

 

方法 1:Google 雲端硬碟

1. 將圖片上傳至 Google 雲端硬碟中

2. 點選「 + 共用」,設定共用權限為「網路上的人都可以找到並檢視」

3. 點擊「複製連結」

使用瀏覽器開啟此網址

4. 按鍵盤中的《F12》,開啟網頁原始碼。點擊右上角箭頭 → 再點擊圖片

5. 將反藍的地方快速點兩下,複製 " https://………." 內的圖片網址

6. 進入 HTML 編輯器中,點選「插入/編輯圖片」

將剛剛複製的圖片位址貼上,按「確定」

6. 確認所插入的圖片有完整顯示在編輯器中,這樣就完成囉!
※ 若插入後發現顯示 □,或圖片有無法呈現的狀況,請檢查圖片網址是否有完整複製。

 

 

方法 2:Imgur 免費圖床空間

1. 點擊 https://imgur.com/  網址進入 imgur,右上角「Sign up」進行註冊 (可直接使用 facebook、google 帳號快速註冊),後續上傳的圖片皆會存在於此帳號中
※ 後續登入要點選「Sign in」即可登入。

2. 點選上方的「New post」上傳圖片

3. 「Browse」按下去可直接從檔案中選擇圖片

4. 在上傳好的圖片,〝點右鍵 → 複製圖片位址〞

5. 進入 HTML 編輯器中,點選「插入/編輯圖片」

將剛剛複製的圖片位址貼上,按「確定」

6. 確認所插入的圖片有完整顯示在編輯器中,這樣就完成囉!
※ 若插入後發現顯示 □,或圖片有無法呈現的狀況,請檢查圖片網址是否有完整複製。

 

 

方法 3:Funto 雲端圖床

若後續商店穩定,可購買穩定性高、且有安全加密過的圖床空間,無須複雜的上傳,就像從電腦選擇圖片上傳一樣輕鬆簡單。想了解更多可點此進入 FunTo 雲端圖床 部落格

 

 

 

二、插入影片

1. 將影片上傳至 youtube

 

2. 點擊「分享」

複製下方網址

3. 進入 HTML 編輯器中,點選「插入/編輯影音」

貼上剛剛所複製的影片網址,按確定

4. 確認所插入的影片有完整顯示在編輯器中,這樣就完成囉!
※ 若插入後發現顯示 □,或影片有無法呈現的狀況,請檢查影片網址是否有完整複製。

 

 

三、自行編寫 html tag 

需要注意以下幾點:

● HTML編輯器只允許使用html tag,以及HTML編輯器內所提供的樣式排版功能。

● 其它如 <script>、 <style>、 <link>、行內css、id、class...等,一律篩選過濾移除,只保留合法的html tag。

● 如使用表單功能,只限使用 iframe 方式嵌入,建議使用 google 表單來完成。

 

 

四、了解其他編輯器功能

● 超連結:

* 使用情況 
→ 文字、圖片點擊後要連結至其他網頁。
如:line 加入好友 + line 分享邀請連結。

* 使用方式 
→ 文字、圖片放入 HTML 編輯器後,選擇要加上超連結的內容,點選「超連結」,再把連結網址貼上。

 

● 消除格式:

* 使用情況 
→ 原文字資料複製貼上時,夾雜格式排版,想貼上乾淨的 (無格式) 文字時使用。
→ 編輯後,發現商店前台圖片之間有大量空白。

* 使用方式 
→ 選擇要消除格式的區域後,點選「清除格式」 。

 

 

● 智慧斷行:

* 使用情況
→ 換段落時,下個段落還夾雜著上個段落的格式,無法消除,想要重新開始一個新段落。

* 使用方式
→ 一段落結尾,點「智慧斷行」,就像是點了 Enter 一樣,會自行清除所有格式換到下一個段落,重新開始。