• 後台 HTML 編輯器

    • 最後更新 2021-05-04 17:37

    在後台可以看到有像這樣的 HTML 編輯器,商家使用電腦、平板、或手機皆可以編輯。

     

    電腦版顯示

     

    平板或手機上,可以往右滑看到更多編輯器功能

     

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

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

     

     

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

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

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

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

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

     

     

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

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

    一、插入圖片

    二、插入影片

    三、嵌入Instagram貼文

    四、自行編寫 html tag

    五、了解其他編輯器功能

     


     

    一、插入圖片

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

     

    方法 1:Imgur 免費圖床空間

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

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

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

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

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

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

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

     

     

    方法 2:Funto 雲端圖床

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

     

     

     

    二、插入影片

    1. 將影片上傳至 youtube

     

    2. 點擊「分享」

    複製下方網址

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

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

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

     

     

    三、嵌入Instagram貼文

    找到你想嵌入的IG貼文,點選右上角,選擇「內嵌」

     

    複製內嵌程式碼

     

    回到後台,點選編輯器上IG的小圖示

     

    在跳出視窗中,貼上剛剛複製的程式碼,點選確定

     

    貼文就會出現在編輯器中,再點選「儲存」後,就能在前台文章中看到內嵌的IG貼文囉!

     

     

     

    四、自行編寫 html tag 

    需要注意以下幾點:

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

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

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

     

     

    五、了解其他編輯器功能

    ● 超連結:

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

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

     

    ● 消除格式:

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

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

     

     

    ● 智慧斷行:

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

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