WordPress 網站架設

[外掛] MWT-CKEditor for Widget 小工具再強化! 讓小工具也使用CKEditor編輯器

2019/05/29

梅問題-[外掛] MWT-CKEditor for Widget 小工具再強化!讓小工具也支援CKEditor編輯器
  WordPress的小工具,真的很方便也很好用,且WordPress也不斷的在強化小工具模組,從最早只有文字的編輯框,直到現在終於支援視覺化的編輯器,讓在預覽模式下,可以簡易的修改文字與字體樣式,和加入連結,而這對於一般朋友來說,應該也算相當夠用,而最近梅干在幫好友設計一個佈景時,裡面也有用到小工具,雖然說透過HTML編輯器,去新增刪減資料,也已相當的習慣,但這對於沒有網頁基礎的朋友來說,還真是一大困擾。

  因此梅干就想說,那就把CKEditor編輯器,整合到WordPress的小工具中,但在整合的過程中,有點不太順利,卡關了二、三天,終於成功的將CKEditor成功的整合到小工具中,因此現在透過CKEditor,在編輯HTML就更加方便,像是下拉選單、文字對齊、文字底色、插入圖片與連結…..等,同時顯示在前台的原始碼,也完全不加料,因此你也喜歡小工具的朋友,這隻由梅干所開發的CKEditor編輯器,希望各位會喜歡,當然使用上有任何問題,也歡迎隨時討論。


MWT-CKEditor for Widget
外掛名稱:MWT-CKEditor for Widget
外掛下載:https://github.com/minwt/mwt-widget-ckedit/releases

Step1
首先,先將外掛下載回來。
梅問題-[外掛] MWT-CKEditor for Widget 小工具再強化!讓小工具也支援CKEditor編輯器
Step2
接著進到WordPress後台,再到「 外掛 安裝外掛 」選項後,選擇剛所下載的外掛壓縮檔,再按「立即安裝」鈕。
梅問題-[外掛] MWT-CKEditor for Widget 小工具再強化!讓小工具也支援CKEditor編輯器
Step3
安裝完畢後,再按「啟用外掛」鈕。
梅問題-[外掛] MWT-CKEditor for Widget 小工具再強化!讓小工具也支援CKEditor編輯器
Step4
當啟用外掛後,再到小工具面板,這時就會看到「CKEditor編輯器」的小工具,再將它拖拉到小工具中,再點下輸入框。
梅問題-[外掛] MWT-CKEditor for Widget 小工具再強化!讓小工具也支援CKEditor編輯器
Step5
鏘~鏘~立即就會展開變成CKEditor的編輯界面。
梅問題-[外掛] MWT-CKEditor for Widget 小工具再強化!讓小工具也支援CKEditor編輯器
Step6
這時再點「原始碼」鈕,將已設計好的HTML碼,貼到原始碼的輸入框下。
梅問題-[外掛] MWT-CKEditor for Widget 小工具再強化!讓小工具也支援CKEditor編輯器
Step7
再切回預覽模式時,這時在輸入框中,就會看到剛所輸入的HTML碼,這時當要刪減下拉選項時,只需對著下拉選單雙響。
梅問題-[外掛] MWT-CKEditor for Widget 小工具再強化!讓小工具也支援CKEditor編輯器
Step8
接著就會展開控制面板,在這面板中,就可自行的新增選項。
梅問題-[外掛] MWT-CKEditor for Widget 小工具再強化!讓小工具也支援CKEditor編輯器
Step9
甚至也可改變選項的排序。
梅問題-[外掛] MWT-CKEditor for Widget 小工具再強化!讓小工具也支援CKEditor編輯器
Step10
當有多個編輯框時,為了日後容易辨識,因此可在上方的標題中,自行輸入名稱,而這名稱只會顯示在小工具的標題欄上。
梅問題-[外掛] MWT-CKEditor for Widget 小工具再強化!讓小工具也支援CKEditor編輯器
Step11
回到前台,這時就會顯示剛所設定的選單選項,而這隻外掛不會再包覆任何的DIV與樣式名稱,因此方便自行設定所需的樣式名稱,這隻CKEditor編輯器的小工具,並不是讓各位從零開始打造,而是便於日後維護,因此各位在使用上,有任何的想法與問題,也歡迎隨時討論囉!
梅問題-[外掛] MWT-CKEditor for Widget 小工具再強化!讓小工具也支援CKEditor編輯器