2007/11/10

增加 WordPress 的編輯器按鈕

WordPress 的 WYSIWYG 是用 TinyMCE 這套,但是預設的按鈕很少,只有粗體、斜體、刪除線等等幾種,字體顏色、字體大小、背景色等等都沒有。
但 WordPress 在這藏了 一個小技巧,在文章編輯畫面中,如果是 Firefox 只要同時按下 Alt + Shift + v 這三個鍵,就會跑出第二行按鈕。如果是 IE,按下 Alt + v 也會有同樣的效果。

不過這第二行也沒有背景色或字體大小可以選,而且字體顏色還要按組合鍵才會出現實在太麻煩了。
由於之前玩過 TinyMCE,所以知道 TinyMCE 這些按鈕的設定方式。因此直接到程式碼中找設定,果然在 wp-includes/js/tinymce/tiny_mce_config.php 裡找到這些按鈕的設定(檔名一看就知道這是 TinyMCE 的設定檔)。

打開之後,在第 32 行就可以看到按鈕的設定

$plugins = implode($plugins, ',');

$mce_buttons = apply_filters('mce_buttons', array('bold', 'italic', '(太長省略)'));
$mce_buttons = implode($mce_buttons, ',');

$mce_buttons_2 = apply_filters('mce_buttons_2', array());
$mce_buttons_2 = implode($mce_buttons_2, ',');

其中 bold 和 italic 這邊就是按鈕的設定值,只要參考 TinyMCE 官方網站中的按鈕設定,將想加上的按鈕名稱用單引號括起來,放到 italic 後面就可以了(記得要用逗號區隔)。
TinyMCE 可用的按鈕名稱: TinyMCE:Control reference
比方說我想在 italic 後面加上字體顏色和背景色這兩個按鈕,就把第 32 行改成:

$mce_buttons = apply_filters('mce_buttons', array('bold', 'italic', 'forecolor', 'backcolor', 'str....

這樣就會多兩個按鈕出來囉。

沒有留言:

張貼留言