WordPress默認TinyMCE編輯器增加彩色美化框自定義按鈕
編輯：狂族晨曦 來源：WordPress技巧 日期：2016-06-16 閱讀： 8,405 次 22 條評論 » 百度已收錄
先森在新的友鏈伙伴閑魚博客那里看到了一篇技術文，介紹的是WordPress短代碼實現文章添加彩色美化框。可能看標題大家不太明白說的是什么，其實就是指的包裹著這段話的綠框框。
先森覺得其美化效果是有了，但是卻并不方便，所以對整個代碼做了修改，增加了幾個WordPress默認TinyMCE編輯器自定義按鈕。點擊按鈕直接插入標簽，更加方便實用。
效果展示
綠色輸入框：輸入文字
紅色提示框：輸入文字
黃色提示框：輸入文字
灰色提示框：輸入文字
這種彩色美化框非常常見，尤其是實用知更鳥主題的博客，先森的友鏈都有很多是實用的知更鳥主題。相信無論是知更鳥主題，還是這種美化框，都是很受歡迎的。
效果實現
在閑魚博客那里，先森發現使用的是短代碼實現的。但當先森研究了一下WordPress默認TinyMCE編輯器增加自定義按鈕的時候發現，其實可以直接省略短代碼那一步了，來看看怎么實現的吧。
1.更改編輯器默認視圖為HTML
大家都知道，在后臺新建文章后，編輯器就自動跳轉到“可視化”視圖，對于一些經常要插入代碼或者WEB設計者們來說，可能更習慣使用HTML視圖手動編輯。
設置方法：將以下代碼添加到主題的functions.php文件里即可：
//更改編輯器默認視圖為HTM
add_filter('wp_default_editor', create_function('', 'return "html";'));
2.新增WordPress默認TinyMCE編輯器自定義按鈕
在WordPress主題的functions.php最后一個?>前加入一下代碼：
//添加HTML編輯器自定義快捷標簽按鈕
add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');
function bolo_after_wp_tiny_mce($mce_settings) {
?>
<script type="text/javascript">
QTags.addButton( 'v_notice', '綠色提示框', '<blockquote id="sc_notice">輸入文字</blockquote>\n', "" );
QTags.addButton( 'v_error', '紅色提示框', '<blockquote id="sc_error">輸入文字</blockquote>\n', "" );
QTags.addButton( 'v_warn', '黃色提示框', '<blockquote id="sc_warn">輸入文字</blockquote>\n', "" );
QTags.addButton( 'v_tips', '灰色提示框', '<blockquote id="sc_tips">輸入文字</blockquote>\n', "" );
</script>
<?php
}
其中，主要設置自定義按鈕的是這個函數：
QTags.addButton( ”, ”, ”, ” );
【四對引號，分別表示按鈕的ID、按鈕顯示名、點一下輸入內容、再點一下關閉內容（最后一對引號為空則一次輸入全部內容），\n表示換行】
形象說明：
QTags.addButton( ‘ 按鈕ID‘, ‘按鈕顯示名‘, ‘點一下輸入內容‘, ‘點一下關閉內容‘ );
可以自定義添加多行 QTags.addButton( ”, ”, ”, ” ); 增加多個按鈕！
3.CSS美化
將css代碼放入主題的style.css文件中或其他地方：
/*彩色美化框*/
#sc_notice { color: #7da33c; background: #ecf2d6 url('images/sc/sc_notice.png') -1px -1px no-repeat; border: 1px solid #aac66d; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px;width: 98%; }
#sc_warn, .post-password-form { color: #ad9948; background: #fff4b9 url('images/sc/sc_warn.png') -1px -1px no-repeat; border: 1px solid #eac946; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px;width: 98%; }
#sc_error { color: #c66; background: #ffecea url('images/sc/sc_error.png') -1px -1px no-repeat; border: 1px solid #ebb1b1; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px;width: 98%; }
#sc_tips {color: #7da33c;background: #ecf2d6 url('images/sc/sc_tips.png') -1px -1px no-repeat;border: 1px solid #aac66d;padding: 15px 15px 5px 35px;margin: 10px 0;width: 98%;overflow: hidden;}
CSS代碼中有4個圖標鏈接，請將鏈接改為你保存的位置圖標素材下載：鏈接: http://pan.baidu.com/s/1bo3ziCB 密碼: chxs(成航先森)
4.后臺效果
完成以上步驟后，打開文章編輯界面，應該會看到以下效果：
實現后臺效果
使用時，只需要將“輸入文字”改為需要的文字即可。
寫在最后
先森從開始WordPress建站之后，就將WordPress默認的TinyMCE編輯器換成了百度UEditor編輯器了，所以為了完成本文的效果還費了點功夫來熟悉默認編輯器。先森是兩步一起走，同時還實現了為UEditor編輯器增加同樣功能的自定義按鈕。相較于UEditor，TinyMCE的自定義按鈕就顯得很小兒科了，方法先森過兩天再分享出來。
轉載請注明出處來自http://www.cnidcc.cn/tinymce_caise_anniu.html
川公網安備 51011202000104號
好久沒來了，過來瞧瞧。
代碼框里面的代碼怎么是亂的
@杰倫視頻網： 要等一會兒才會把代碼框的外殼加載出來、、、
@狂族晨曦： 今天加載挺快的
搞這么多不同顏色的框，那得多么豐富的內容才能用得上啊！
@Koolight： 又不是在一篇文章中添加所有顏色的，只在需要的時候添加即可。我認為是綠色摘要、引用，黃色提醒，粉紅色警告，灰色引用鏈接，各種顏色功能不同吧，看怎么用了。
@閑魚： 主要是并不是所有人都用的知更鳥的嘛，他們就沒有你這么方便了
確實用得上
大神們經常搞點東西出來，羨煞不懂技術的人
這種高亮顯示對于經常插入代碼來說，體驗上很好。
沒啥多少內容好像用不上
這個弄著還不錯
太過聚焦在技術上，就有些過了吧
好東西！我一般都是看到喜歡的直接扒來！
不錯哦，謝謝博主分享
挺不錯的！雖然我也想折騰一下，不過怕不適合zlog！
一切的美化都是基于CSS的 學習CSS是絕對有必要的
找了一大圈，終于找到了！感謝。
QTags.addButton( ‘ 按鈕ID‘, ‘按鈕顯示名‘, ‘點一下輸入內容‘, ‘點一下關閉內容‘ );
按鈕ID和點一下輸入內容中的ID不一樣！是不是有錯誤啊？
@堆愛博客： 不是錯誤，兩個ID的作用不一樣，按鈕ID是區分按鈕的，標簽ID是用于定義CSS代碼的。
為什么我沒有整出來！