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

梅干 2021/06/03 1 分鐘閱讀

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

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

Emmet

官方網址：https://emmet.io/
下載連結：https://github.com/emmetio/textarea

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原始碼