很多人看不上 WordPress 的編輯器,因為可用功能實在是少的可憐。由於經常要文章中插入各種程式碼,在之前一直使用的編輯器增強外掛“CK and SyntaxHighlighter“ 這個編輯器很強大,但是後來發現顯示的程式碼高亮與筆者用的模板嚴重不符。由於筆者的部落格做了防複製,導致頁面程式碼又不能複製,需要一款外掛實現程式碼高亮並且支援複製!

後來經過百度一下又繼續谷歌兩下下。嘿嘿~終於發現了一款令滿意的程式碼高亮外掛而且還可以複製程式碼。

找到外掛了,於是安裝啟用,一看,立刻杯具了,這款外掛加上 CK and SyntaxHighlighter 編輯器外掛,兩個一起使用,竟然有衝突,寫出的程式碼好多是亂碼。測試了下發現程式碼高亮的外掛只能在預設的編輯器中使用。也就是說我要先解除安裝 CK and SyntaxHighlighter 編輯器外掛才能使用它。天理何在啊。

天生愛折騰的命,這個問題必須解決。

現在擺在面前的問題是,想要使用編輯器外掛,就不能使用程式碼高亮外掛,但是我兩個都需要啊,這種二選一的難題真令人頭痛啊 ,必須找個兩全其美的辦法來解決!

四處尋覓無果。無意看了一下 WordPress 官方的 API 函式。蒼天有眼啊!原來,後臺的編輯器可以插入很多增強功能。果斷解除安裝掉 CK and SyntaxHighlighter 編輯器外掛。事實上,WordPress 的編輯器很強大,幾乎包含所有的編輯器按鈕。只是程式預設的功能比較少而已吖!

馬上為自己的 WordPress 預設編輯器新增了常用的實用功能做下測試,效果還真是很不錯的吖。哈哈看圖!

是不是和預設的那個簡陋的編輯器不一樣呢?最後一行功能是用程式碼加上的。這些功能預設編輯器是沒有的!只是我們需要把它們調出來加上就可以啦,開始還對這個摸索了不少時間- -,最後發現其實方法超級簡單!

找到你正在使用的那個主題的模版函式檔案 (也就是 functions.php 這個檔案),在其中加入下面這段程式碼:

//增強編輯器開始

function add_editor_buttons($buttons) {

$buttons[] = 'fontselect';

$buttons[] = 'fontsizeselect';

$buttons[] = 'cleanup';

$buttons[] = 'styleselect';

$buttons[] = 'hr';

$buttons[] = 'del';

$buttons[] = 'sub';

$buttons[] = 'sup';

$buttons[] = 'copy';

$buttons[] = 'paste';

$buttons[] = 'cut';

$buttons[] = 'undo';

$buttons[] = 'image';

$buttons[] = 'anchor';

$buttons[] = 'backcolor';

$buttons[] = 'wp_page';

$buttons[] = 'charmap';

return $buttons;

}

add_filter("mce_buttons_3", "add_editor_buttons");

//增強編輯器結束

儲存下就可以啦!哈哈,文章啟用防複製,頁面上的程式碼是複製不了啦,但是你可以點選程式碼右上角” 檢視原始碼“ 按鈕,在彈出的視窗進行復制!

最後,附上搜集的按鈕呼叫的 Key,也就是說,下面這些功能都可以增加到編輯器裡面,哈哈,夠強大吧!

下面的功能按鈕可以自行新增,你新增更多功能的時候只要把程式碼中 “$buttons[] =” 後面單引號內的單詞換成下面括號裡列出的那些 Key 就可以了啦!

還在糾結 WordPress 自帶編輯器功能少的朋友,快去試試看吧!

WordPress 編輯器按鈕呼叫的 Key:

1. 剪下 (cut) 複製 (copy) 貼上 (paste) 撤銷 (undo) 重做 (redo) 居中 (justifycenter)

2. 加粗 (bold) 斜體 (italic) 左對齊 (justifyleft) 右對齊 (justfyright)

3. 兩端對齊 (justfyfull) 插入超連結 (link) 取消超連結 (unlink) 插入圖片 (image)

4. 清除格式 (removeformat) 下劃線 (underline) 刪除線 (strikethrough)

5. 錨文字 (anchor) 新建文字 (newdocument)

6. 字型顏色 (forecolor) 字型背景色 (backcolor)

7. 格式選擇 (formmatselect) 字型選擇 (fontselect) 字號選擇 (fontsizeselect)

8. 樣式選擇 (styleselect) 無序列表 (bullist) 編號列表 (numlist)

9. 減少縮排 (outdent) 縮排 (indent) 幫助 (wp_help)

10 開啟 HTML 程式碼編輯器 (code) 水平線 (hr) 清除冗餘程式碼 (cleanup)

11. 上標 (sub) 下標 (sup) 特殊符號 (charmap) 插入 more 標籤 (wp_more)

12. 插入分頁標籤 (wp_page)

13. 隱藏按鈕顯示開關 (wp_adv)

14. 隱藏按鈕區起始部分 (wp_adv_start)

15. 隱藏按鈕區結束部分 (wp_adv_end)

16. 寫檢查 (spellchecker)