.::灵狼天::. » WS Audio Player

测试 WS Audio Player 在 wp2.7 的兼容性

icyleaf — Fri, 12 Dec 2008 02:02:18 +0000

[audio=http://cdn1-65.projectplaylist.com/e1/static10/349/2243227.mp3,viva la vida,download]

PS, WordPress 2.7 确实很赞～

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

icyleaf — Mon, 02 Jun 2008 07:30:03 +0000

编写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”以便记忆。首先我们先看下主文件的全部代码：

/*
Plugin Name: Simple Plugins
Plugin URI: http://www.icyleaf.cn/
Description: Simple Plugins
Version: 1.0
Author: icyleaf
Author URI: http://www.icyleaf.cn/
*/

// 定义一个常量并判断wp是否是2.5以上版本
define('IS_WP25', version_compare($wp_version, '2.4', '>=’) );

// 定义插件目录的常量
$myabspath = str_replace(“\\”,”/”,ABSPATH); // 针对Windows & XAMPP
define(‘WINABSPATH’, $myabspath);
define(‘WSAPFOLDER’, dirname(plugin_basename(__FILE__)));
define(‘WSAP_ABSPATH’, $myabspath.’wp-content/plugins/’ . WSAPFOLDER .’/');
define(‘WSAP_URLPATH’, get_option(‘siteurl’).’/wp-content/plugins/’ . WSAPFOLDER.’/');

if (IS_WP25){
function SinmplePlugins_addbuttons() {
// 权限判断，若没有撰写日志和页面的权限就返回。
if ( !current_user_can(‘edit_posts’) && !current_user_can(‘edit_pages’) ) return;

// 仅在Visual（可视化）模式下添加
if ( get_user_option(‘rich_editing’) == ‘true’) {
// 添加必要的函数到wp hook里面
add_filter(“mce_external_plugins”, “add_SinmplePlugins_tinymce_plugin”, 5);
add_filter(‘mce_buttons’, ‘register_SinmplePlugins_button’, 5);
}
}

// 在wp2.5的tinymce编辑器注册按钮插件，名字要独一无二
function register_SinmplePlugins_button($buttons) {
array_push($buttons, “separator”, “PluginsName”);
return $buttons;
}

// 加载自定义的TinyMCE插件：editor_plugin.js (wp2.5)
function add_SinmplePlugins_tinymce_plugin($plugin_array) {
$plugin_array['PluginsName'] = WSAP_URLPATH.’tinymce3/editor_plugin.js’;
return $plugin_array;
}

function SinmplePlugins_change_tinymce_version($version) {
return ++$version;
}

// 当你的tinyMCE插件改变了就修改tinyMCE插件版本号。
add_filter(‘tiny_mce_version’, ‘SinmplePlugins_change_tinymce_version’);

// 插件初始化
add_action(‘init’, ‘SinmplePlugins_addbuttons’);
}
?>

可能大家通过上面的代码还不明白，我这里简单讲述一下核心的东西。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）来把设置的内容添加到编辑器中。

// Docu : http://wiki.moxiecode.com/index.php/TinyMCE:Create_plugin/3.x#Creating_your_own_plugins

(function() {
// 多语言支持的插件标识，和langs的各个语言文件匹配
tinymce.PluginManager.requireLangPack(‘SimplePlugins’);

tinymce.create(‘tinymce.plugins.SimplePlugins’, {
/**
* 初始化插件，在创建完成后就可以显示执行了
* @参数 {tinymce.Editor} ed 编辑器初始化点。
* @参数 {string} url 插件位置的绝对URL。
*/
init : function(ed, url) {
// 加载按钮时，执行此函数，名字以小写的mce开头，后面接注册插件的名字。
ed.addCommand(‘mceSimplePlugins’, function() {
ed.windowManager.open({
file : url + ‘/window.php’, //显示窗口的文件
width : 360 + ed.getLang(‘SimplePlugins.delta_width’, 0),
height : 210 + ed.getLang(‘SimplePlugins.delta_height’, 0),
inline : 1
}, {
plugin_url : url // 插件的绝对URL.
});
});

// 注册按钮
ed.addButton(‘SimplePlugins’, {
title : ‘SimplePlugins.desc’,
cmd : ‘mceSimplePlugins’,
image : url + ‘/simple.png’ //按钮的图标
});

// Add a node change handler, selects the button in the UI when a image is selected
ed.onNodeChange.add(function(ed, cm, n) {
cm.setActive(‘SimplePlugins’, n.nodeName == ‘MP3′);
});
},

/**
* Creates control instances based in the incomming name. This method is normally not
* needed since the addButton method of the tinymce.Editor class is a more easy way of adding buttons
* but you sometimes need to create more complex controls like listboxes, split buttons etc then this
* method can be used to create those.
*
* @param {String} n Name of the control to create.
* @param {tinymce.ControlManager} cm Control manager to use inorder to create new control.
* @return {tinymce.ui.Control} New control instance or null if no control was created.
*/
createControl : function(n, cm) {
return null;
},

// 插件信息
getInfo : function() {
return {
longname : ‘SimplePlugins’,
author : ‘icyleaf’,
authorurl : ‘http://www.icyleaf.cn/how-to-load-tinymce-plugins-for-wordpress’,
infourl : ‘http://www.icyleaf.cn’,
version : “1.0″
};
}
});

// 注册插件
tinymce.PluginManager.add(‘SimplePlugins’, tinymce.plugins.SimplePlugins);
})();

这个是一个典型的配置文件，不好意思英语很烂，只能简单翻译，在这个文件的开头是加载语言的标识，语言文件都放在其插件的langs文件夹下面，一每个国家的语言缩写作为其语言，比如，美式英语：en_US.js；中国的简体中文，那就是cn_ZH.js。

window.php是窗口显示的文件，这里就不在多说了，大家自己看下WS Auido Player插件的代码就知道了，那么如何把填写好的配置返回到编辑器里面呢，如果你注意看window.php，你会发现，他在提交时调用了一个js函数。这个函数是放在插件的tinymce.js文件里面。然后通过tinymce.js主函数的处理就把相关的代码插入到编辑器当中了：）

WS Audio Player1.1.0发布

icyleaf — Thu, 22 May 2008 11:53:56 +0000

Update：
1.修正了一些错误，去掉了调试用的注解掉的语句。版本升级至1.1.2
2.添加插件说明地址：http://www.icyleaf.cn/projects/ws-audio-player/

Chinese
今天下午花了些时间完成了WS AudioPlayer1.1.0版本的制作，现在已经完全且仅支持WordPress2.5+版本。如果你现在用的WordPress版本还不是2.5+，那么就赶紧升级吧～主要原因是不想浪费多余的体积大小：）

插件下载：WS Audio Player1.1.2

如果到你不知道这个插件的话，请点击这里看详细哦～

English
Now This version(1.1.0) only use for WordPress 2.5+. and you can insert music with button between Vistual Mode and HTML mode. if you are not WordPress 2.5+, suggest update to latest version.:)

Plugin Download: WS Audio Player1.1.2

see History or want konw what it is, please click here.

WS Audio Player应急版For WordPress2.5

icyleaf — Mon, 31 Mar 2008 03:13:07 +0000

WordPress2.5版本内置的TinyMCE富编辑器也跟着升级到了3.0版本，TinyMCE3.0版本改写了插件的结构导致我这个插件也和WP2.5造成了不兼容，目前我还没有来得及研究TinyMCE3.0插件的内部结构以及WP2.5为它的写的钩子（Hook）是否发生了变化。因为我在我WP后台的Trackback发现很多外国的朋友中有一些在用我的这个插件做音乐介绍，为了保证他们正常的使用，我特作了WP2.5的应急版本，删除掉了富编辑器模式（Visual）下的按钮，大家可以通过CODE模式（HTML）点击名为MP3的按钮来添加音乐。同时我在有时间的时候会好好研究下WordPress2.5与TinyMCE的内部结构，我也希望能在未来的几天内释出完全支持WP2.5版本的WS Audio Player插件。
同时也感谢大家的使用和支持。谢谢！

WordPress 2.5 was recently released and that it includes TinyMCE 3 by default. it made many plugins is’t to work,includes ws audio player. so i release a emergency version for wordpress 2.5. Delete insert mp3 button in “Visual mode”, you can use it in “HTML mode”. i hope this will make everthing is ok that who use my plugins. I also hoped that the new release support WP2.5 edition completely WS Audio the Player plug-in unit in future several days.
thanks to everybody’s use and supports.

关于WordPress2.5和插件那档子的事

icyleaf — Sun, 30 Mar 2008 07:12:02 +0000

WordPress2.5应该是今天的凌晨1点多发布的，当时我在用手机上Twitter，看到漫步同学发布的消息。事实上我昨天下午才把我的Demo WP的版本升级至2.5 rc3版本，没想到凌晨就发布了正式版。貌似和rc3版本没什么大的差别，后台什么的变化挺大的。最主要的是这次升级修改了很多的地方：
1.全新的用户管理界面
2.更加简洁实用的后台管理菜单
3.Widgets 管理的显著增强
4.区域化的后台首页显示
5.增强的可视化编辑器
6.非常实用的一键升级插件功能
7.Flash 效果的上传文件管理
8.标签管理

同时这次的升级也导致了很多插件的不兼容，所以大家在升级前一定要把所有的配置插件停掉，再用 Instant Upgrade 插件或者 WordPress Automatic Upgrade插件来完成一键升级。这两个插件我测试过，没有问题，这次的升级我就是用的这两个插件。

下面说下这次升级带来的好处和坏处。
好处还是蛮多的，比如系统的速度整体提高上去了，后台的现在也非常的漂亮，尤其是我们再写日志时用的那个富编辑器，也增加了不少功能，可以直接淘汰掉tinymce advanced这个插件了。好像连simple tag也可以省略掉了吧？另外WP的母公司把gravatar也给收购了，又省去一个插件，如何看来以后每次wordpress的大升级就会导致一些优秀化的东西废弃或者被收购….

坏处嘛，其实主要就是插件兼容性的事情，很不幸的是我写的两个插件在其中…后面再说我那两个插件的事情。并附上一份WordPress2.5部分可用插件的列表：猛戳我
此外就是后台的结构布局我还是不满意，想进入某个2级菜单则必须进入其主菜单，而且本来的分类还很多，这次升级后某些都合并在了一起，寻找起来有些麻烦。而且后台模板没有分辨率自适应，仅适合1024×768的分辨率，我目前用的是1280×1024，所以后台的右边有一部分空了出来，让人感觉很不舒服…

下面说说我那两个插件：
WS Tools Bar这个插件我不准备在升级了，因为我在WordPress官方的插件库发现基本上没有人在下载，而且国内也没有需求量，直接废弃掉吧，如果某位有需要，我会提供一些技术上的支持：）
WS Audio Player这个插件我还会更新下去，首先要解决的是支持WordPress2.5版本的问题，恩…凑时间研究下心的tinymce编辑器。

废话就这么多了，核心内容其实没什么，就是想借WordPress2.5发布的事说下我那两个插件的问题，由于没有太多东西，就胡乱扯了一番。呵呵

WordPress插件:WS Audio Player1.0发布

icyleaf — Wed, 09 Jan 2008 11:31:53 +0000

这个版本对我来说期待已久了！对我来说，我终于“征服”了TinyMCE的插件编写4WordPress的问题。插件历史请看这里：WS Audio Player。在发布页面的富编辑器中（即TinyMCE）添加了一个音乐图标的按钮。

插入模式
在此之前小小改动了下，发布了一个0.9.6版本，呵呵(^___^)，其实也没什么大的改动，增加了一个样式，就是传统的经典模式。下载按钮在正右边。

插件下载(Plugins Download):Download

WordPress插件：WS Audio Player 0.9.5发布

icyleaf — Mon, 24 Dec 2007 08:09:47 +0000

WS Audio Player是一个可在日志插入且附带下载功能的在线Flash播放器。更多请看这里。

自从这个插件发布之后就一直在想如何实现在发布的编辑器添加一体化的按钮功能，大家也知道WordPress本身使用的是Tinymce编辑器。我却没有研究过此编辑器，在网上搜了很多的相关资料，不过没有很多的时间研究，最近也挺忙的。后来在一次偶然的机会，让我看到了GadenSt@r同学给我这个插件做了一个Hacks：在编辑工具栏中添加WS Audio Player按钮。
以上的两种方法不管使用哪个，都需要手动修改文件，我认为这很麻烦，为了方便大家的使用，苦苦寻找，研究，终于黄天不负有心人，功能实现了！

0.9.5版本更新列表：
修复了在英文系统下某些中文无法显示翻译为英文。
在编辑器的代码模式添加了MP3按钮以轻松实现本插件的功能。

插件下载：Download

今天已经是平安夜，这里先祝大家圣诞节快乐！
这也算是我送给大家的圣诞节小礼物吧。

做圣诞专题板子的朋友这里还有一份礼物：XmasMaterial.zip

WordPress插件：WS Audio Player0.9.4

icyleaf — Wed, 28 Nov 2007 01:23:11 +0000

这个版本本来并不需要再发日志发布，只不过是前不久我向WordPress官方插件库提交插件，昨天收到了SVN地址，今天本插件在官方插件库已经有一脚之地咯～呼呼~

更新日志：
增加了英语语言的支持。

插件下载地址：http://wordpress.org/extend/plugins/ws-audio-player/

WordPress插件：WS Audio Player 0.9.3修正版

icyleaf — Tue, 06 Nov 2007 14:04:22 +0000

WS Audio Player 0.9版本有一个严重的问题，在FEED里面样式无效，因此特添加FEED下的显示效果，由于FEED的限制，只能做一个简单的语言描述。
另外修正了几个CSS的显示问题：字体偏小，某些时候会发生错位，覆盖其他文字等现象。
安装及使用方法还是那样，不明白的看这里。

添加的CSS Style：控制音乐名称的style。
/*******Music Desc********/
.wsmusicdesc {
font-size:14px;
}

WS Audio Player 0.9.3下载：Click here .