囧

WordPress插件教程：如何编写TinyMCE插件

編寫WordPress（以下簡稱wp）插件難免要和關聯著wp的某一個或多個方面的東西，就拿我的剛更新的WS Auido Player插件來說，它需要提供一個窗口使得用戶輸入某些值來達到簡化用戶記憶以及操作的功能。自己敲一個兩個代碼還好，如果全部都是自己寫的話，那和寫HTML有什麼區別呢？這個就是TinyMCE編輯器面世的主要目的之一。

其實想這個部分的東西，主要是因為國內也沒出幾個這樣的插件（或者是我不知道而已）再者是也蠻少有人來寫這方面的教程，網上找到的只有幹巴巴、苦澀的英文句子，看著就是沒中國字舒服，呵呵(^___^)，所以我就花了點時間自己整理出了這個教程。當然wp官方也有提到如何編寫只不過寫了一些核心的幾句代碼（看這裡），剩下的還讓你自己參考wp系統中tinymce插件。為什麼要看wp系統中tinymce插件，而不是看tinymce官方的文檔呢，這裡要說句牢騷的話。wp其中使用到了很多及其優秀的開源代碼，而且每個東西還或多或少的修改修改。這一下讓我們看開源代碼不是，看wp系統又感到迷茫。最好的是兩者都得看。

書歸正傳，首先我們先簡述下Tinymce在wp中用到版本。在wp 2.1.x - 2.3.x版本中使用到的是一直沒有更改Tinymce 2。而在Tinymce 3推出不久，wp做了重大的版本變動，也就是現在的2.5，其中更新至tinymce3。而tinymce3也是一個大變動的版本，其中較大的改寫了 tinymce插件的函數。當然這也是為了方便用戶而改進的。注意由于wp2.3.x版本已經老了，本教程只支持wp2.5以上版本。

首先，構建wp插件必要的文件以及基本代碼，這裡我把插件項目的名稱叫做“SimplePlugins”以便記憶。首先我們先看下主文件的全部代碼：

1. <?php
2. /*
3. Plugin Name: Simple Plugins
4. Plugin URI: http://www.icyleaf.cn/
5. Description: Simple Plugins
6. Version: 1.0
7. Author: icyleaf
8. Author URI: http://www.icyleaf.cn/
9. */
10.
11. // 定義一個常量並判斷wp是否是2.5以上版本
12. define(’IS_WP25′, version_compare($wp_version, ‘2.4′, ‘>=’) );
13.
14. // 定義插件目錄的常量
15. $myabspath = str_replace(”\\”,”/”,ABSPATH); // 針對Windows & XAMPP
16. define(’WINABSPATH’, $myabspath);
17. define(’WSAPFOLDER’, dirname(plugin_basename(__FILE__)));
18. define(’WSAP_ABSPATH’, $myabspath.’wp-content/plugins/’ . WSAPFOLDER .’/');
19. define(’WSAP_URLPATH’, get_option(’siteurl’).’/wp-content/plugins/’ . WSAPFOLDER.’/');
20.
21. if (IS_WP25){
22. function SinmplePlugins_addbuttons() {
23. // 權限判斷，若沒有撰寫日志和頁面的權限就返回。
24. if ( !current_user_can(’edit_posts’) && !current_user_can(’edit_pages’) ) return;
25.
26. // 僅在Visual（可視化）模式下添加
27. if ( get_user_option(’rich_editing’) == ‘true’) {
28. // 添加必要的函數到wp hook裡面
29. add_filter(”mce_external_plugins”, “add_SinmplePlugins_tinymce_plugin”, 5);
30. add_filter(’mce_buttons’, ‘register_SinmplePlugins_button’, 5);
31. }
32. }
33.
34. // 在wp2.5的tinymce編輯器注冊按鈕插件，名字要獨一無二
35. function register_SinmplePlugins_button($buttons) {
36. array_push($buttons, “separator”, “PluginsName”);
37. return $buttons;
38. }
39.
40. // 加載自定義的TinyMCE插件：editor_plugin.js (wp2.5)
41. function add_SinmplePlugins_tinymce_plugin($plugin_array) {
42. $plugin_array['PluginsName'] = WSAP_URLPATH.’tinymce3/editor_plugin.js’;
43. return $plugin_array;
44. }
45.
46. function SinmplePlugins_change_tinymce_version($version) {
47. return ++$version;
48. }
49.
50. // 當你的tinyMCE插件改變了就修改tinyMCE插件版本號。
51. add_filter(’tiny_mce_version’, ‘SinmplePlugins_change_tinymce_version’);
52.
53. // 插件初始化
54. add_action(’init’, ‘SinmplePlugins_addbuttons’);
55. }
56. ?>

可能大家通過上面的代碼還不明白，我這裡簡單講述一下核心的東西。wp2.5版本把之前的鉤子替換掉了，在wp2.5+中關系Tinymce3，主要是由以下兩個鉤子：
mce_buttons：通過一個以按鈕名字做參數的（輸入輸出）PHP函數來注冊按鈕並返回。 “|”符合可以使用separator代替。
mce_external_plugins：通過一個輸入輸出PHP函數關聯數組：’plugin_name’ => ‘plugin_url’
tiny_mce_version：通過版本號碼作為一個字符串，它可以自動改變tinyMCE插件的版本號。

另外，tinymce插件是放在名為tinymce3的文件夾下面，當然名字是自定義的。對于tinymce插件這裡還需要大家看一下 tinymce3的文檔，其配置文件名為editor_plugin.js，通過點擊按鈕加載的顯示窗口的文件是window.php，然後再通過一個 js腳本（tinymce.js）來把設置的內容添加到編輯器中。

1. // Docu : http://wiki.moxiecode.com/index.php/TinyMCE:Create_plugin/3.x#Creating_your_own_plugins
2.
3. (function() {
4. // 多語言支持的插件標識，和langs的各個語言文件匹配
5. tinymce.PluginManager.requireLangPack(’SimplePlugins’);
6.
7. tinymce.create(’tinymce.plugins.SimplePlugins’, {
8. /**
9. * 初始化插件， 在創建完成後就可以顯示執行了
10. * @參數 {tinymce.Editor} ed 編輯器初始化點。
11. * @參數 {string} url 插件位置的絕對URL。
12. */
13. init : function(ed, url) {
14. // 加載按鈕時，執行此函數，名字以小寫的mce開頭，後面接注冊插件的名字。
15. ed.addCommand(’mceSimplePlugins’, function() {
16. ed.windowManager.open({
17. file : url + ‘/window.php’, //顯示窗口的文件
18. width : 360 + ed.getLang(’SimplePlugins.delta_width’, 0),
19. height : 210 + ed.getLang(’SimplePlugins.delta_height’, 0),
20. inline : 1
21. }, {
22. plugin_url : url // 插件的絕對URL.
23. });
24. });
25.
26. // 注冊按鈕
27. ed.addButton(’SimplePlugins’, {
28. title : ‘SimplePlugins.desc’,
29. cmd : ‘mceSimplePlugins’,
30. image : url + ‘/simple.png’ //按鈕的圖標
31. });
32.
33. // Add a node change handler, selects the button in the UI when a image is selected
34. ed.onNodeChange.add(function(ed, cm, n) {
35. cm.setActive(’SimplePlugins’, n.nodeName == ‘MP3′);
36. });
37. },
38.
39. /**
40. * Creates control instances based in the incomming name. This method is normally not
41. * needed since the addButton method of the tinymce.Editor class is a more easy way of adding buttons
42. * but you sometimes need to create more complex controls like listboxes, split buttons etc then this
43. * method can be used to create those.
44. *
45. * @param {String} n Name of the control to create.
46. * @param {tinymce.ControlManager} cm Control manager to use inorder to create new control.
47. * @return {tinymce.ui.Control} New control instance or null if no control was created.
48. */
49. createControl : function(n, cm) {
50. return null;
51. },
52.
53. // 插件信息
54. getInfo : function() {
55. return {
56. longname : ‘SimplePlugins’,
57. author : ‘icyleaf’,
58. authorurl : ‘http://www.icyleaf.cn/how-to-load-tinymce-plugins-for-wordpress’,
59. infourl : ‘http://www.icyleaf.cn’,
60. version : “1.0″
61. };
62. }
63. });
64.
65. // 注冊插件
66. tinymce.PluginManager.add(’SimplePlugins’, tinymce.plugins.SimplePlugins);
67. })();

這個是一個典型的配置文件，不好意思英語很爛，只能簡單翻譯，在這個文件的開頭是加載語言的標識，語言文件都放在其插件的langs文件夾下面，一每個國家的語言縮寫作為其語言，比如，美式英語：en_US.js；中國的簡體中文，那就是cn_ZH.js。

window.php是窗口顯示的文件，這裡就不在多說了，大家自己看下WS Auido Player插件的代碼就知道了，那麼如何把填寫好的配置返回到編輯器裡面呢，如果你注意看window.php，你會發現，他在提交時調用了一個js函數。這個函數是放在插件的tinymce.js文件裡面。然後通過tinymce.js主函數的處理就把相關的代碼插入到編輯器當中了：）

轉自: http://www.icyleaf.cn/2008/06/02/how-to-load-tinymce-plugins-for-wordpress/