搜尋

  1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. Emmet外掛模組,整合TinyMCE編輯器,讓網頁也可使用Emmet快速產生HTML與CSS原始碼

Emmet外掛模組,整合TinyMCE編輯器,讓網頁也可使用Emmet快速產生HTML與CSS原始碼

2021/06/03

梅問題-Emmet外掛模組,整合TinyMCE編輯器,讓網頁也可使用Emmet快速產生HTML與CSS原始碼
    自從使用Emmet就回不去了,再加上幾乎所有主流的網頁編輯器,都有推出相關套件可使用,且操作方式都一樣,只需輸入標籤或類別名稱,按下tab鍵立即就會轉換成HTML的標籤,甚至還可多次重複標籤,同時不用擔心忘了收尾,而造成跑版的問題,本以為Emmet只限於網頁編輯器,但那天在使用CodePen時,無意間發現,在CodePen中竟然也可使用Emmet。

    因此那天便到Emmet的官網,才發現到竟然有推出網頁版的套件,且只要有textarea標籤就可套用,梅干就把它整合到TinyMCE編輯器,現在在使用網頁版編輯器時,也可使用Emmet啦!而習慣使用Emmet的朋友,現在也一塊來看看怎麼整合到網頁中吧!


Emmet
Step1
當進到Emmet的網站後,點一下textarea的圖示。
梅問題-Emmet外掛模組,整合TinyMCE編輯器,讓網頁也可使用Emmet快速產生HTML與CSS原始碼
Step2
接著會到github,再點右上的 Code Download ZIP
梅問題-Emmet外掛模組,整合TinyMCE編輯器,讓網頁也可使用Emmet快速產生HTML與CSS原始碼
Step3
下載完畢,解壓縮後再emmet.min.js複製到專案目錄中就可以了。
梅問題-Emmet外掛模組,整合TinyMCE編輯器,讓網頁也可使用Emmet快速產生HTML與CSS原始碼
安裝Emmet套件到網頁中:
Step4
首先先將emmet.js引用後,再啟用emmet。
1.<script src="emmet.js"></script>
2.<script>
        emmet.require('textarea').setup({
            pretty_break: true, 
            use_tab: true   
        });
    </script>

Step5
當成功加入後,當在textarea的輸入框中,輸好標籤再按Tab鍵,就會自動轉換成HTML的標籤,是不是超方便的呀!!
梅問題-Emmet外掛模組,整合TinyMCE編輯器,讓網頁也可使用Emmet快速產生HTML與CSS原始碼


精選文章

友好網站  樂活大方 | 男丁格爾

回應本文