搜尋

熱門關鍵字:

最新文章

  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
官方網址：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原始碼


emmet, emmet外掛, textarea emmet, 網頁版emmet,