当前位置: MXJAVA > WordPress, 折腾捣鼓 > 文章正文

为FCKEditor追加Audio Player功能

　　Audio Player 是一款博客变播客的 WordPress 的轻量级音乐播放器。它的使用非常简单，只要在文章或页面中插入指定音乐播放的代码就可以正常工作了。虽然 Audio Player 的代码非常简单，不过对于不习惯写代码的 blogger 来说，每次都要手动写代码是比较痛苦的。我不知道在安装 Audio Player 后 WordPress 自带的编辑器是否有可视化编辑功能，我用的 FCKEditor 是没有的。于是趁今天早上有空，扩展了一下文章编辑器，使其播放代码能够在可视化窗口中完成配置并插入文章中。如果你需要这样的功能，如果你使用的编辑器是 FCKEditor （或者基于 FCKEditor 的 WordPress插件，例如 chenpress），那么 Follow Me。

　　１、用 Editra 或 UltraEdit 打开 FCKeditor/fckconfig.js 文件（用记事本也可以，不过 FCKEditor 的代码非常多且没有缩进，如果没有代码高亮显示工具辅助的话，很有可能出错。要知道，一个字母的大小写都可能让 FCKEditor 无法正常工作）。找到 FCKConfig.ToolbarSets["Default"] 在其后面加入 ‘AudioPlay’，用来告诉 FCKEditor 在工具栏追加一个按钮。如下：

1. FCKConfig.ToolbarSets["Default"] = [ 
2.     ['Image','Flash','Rule','Smiley','Codes','-','AudioPlay'] 
3. ] ; 

　　２、打开　FCKeditor/editor/lang/zh-cn.js 文件，找到 InsertCodes ，在其后面加入 AudioPlay : "插入MP3"。如下：

1. InsertCodes         : "插入代码", 
2. AudioPlay           : "插入MP3", 

　　３、接下来的修改一定要细心。打开 FCKeditor/editor/js/fckeditorcode_gecko.js 和 fckeditorcode_ie.js 文件。
a、找到 |InsertHorizontalRule 在其后加入 |AudioPlay。
b、找到 case ‘Image’:B=new FCKDialogCommand 在其前面加入
case ‘AudioPlay’:B=new FCKDialogCommand(’AudioPlay’,FCKLang.AudioPlay,’dialog/wpAudioPlay.html’,450,390);break; 当工具栏按钮按下时，会打开这里指定的 html 文件。
c、找到 case ‘Cut’:B=new FCKToolbarButton 在其前面加入
case ‘AudioPlay’:B=new FCKToolbarButton(’AudioPlay’,FCKLang.AudioPlay,null,null,true,null,49);break; 用来指定工具栏上显示的图片。反正是自己用，就随便用了一个。如果你想改变，用PS打开FCKeditoreditorskinsdefaultfck_strip.gif，追加自己的图片，并将这里的 49 改为图标的位数就可以了。

　　４、下载 wpAudioPlay.html 文件，并将其拷贝到 FCKeditor/editor/dialog 目录下。该文件是按下按钮弹出的画面，如果你比较了解 html 的话，完全可以自行修改。

　　５、在 FCKeditor/editor/dialog 下新建目录命名为 wpAudioPlay 。下载 wpAudioPlay.js 文件并拷贝到该目录下。

　　重新打开“撰写文章”页面，在 FCKeditor 工具栏上是否增加了一个新按钮呢？如果没有，请选清除浏览器缓存再试。点击这个按钮将弹出如下画面：

　　MP3地址：在这里输入想要播放的mp3完整路径。如果mp3放在 audio player 指定的目录下，只要输入mp3的名字即可。和 audio player 官方说明的一样，如果想要播放多首mp3，只要用逗号分隔即可。

　　自动播放：audio player 可以在打开页面后自动播放指定的音乐。在这里选择 Yes 则自动播放，选择 No 则相反。

　　循环播放：同自动播放相同。

　　以上都设置好后，按下确定，就会在指定的位置插入 audio player 播放音乐的代码。

音频片段：需要 Adobe Flash Player ( 9 或以上版本) 播放音频片段。 点击这里下载最新版本。您需要开启浏览器的 JavaScript 支持。

若你被上面的代码搞的晕头转向，那么直接下载吧。

关键字: AudioPlayer, FCKEditor, Plugin

已经有22 个评论

1. 1楼
   10月 5th, 2008 at 1:13 上午 给 FCKEditor 添加 Audio Player 按钮 - WordPress 非官方中文站 说:

   [...] 网友撰写了一篇文章：为FCKEditor追加Audio Player功能，按照这个步骤，你可以在 FCKEditor 的工具栏添加上 Audio Player [...]

2. 2楼
   10月 5th, 2008 at 5:56 上午 wangyh 说:

   好文，我现在发音频还都是手动粘代码。
   谢谢分享：）
   沙发！

3. 3楼
   10月 5th, 2008 at 9:19 上午 hiswing 说:

   这里的沙发很好坐的哦。

4. 4楼
   10月 9th, 2008 at 12:24 上午 饿猫公寓 » Blog Archive » 给 FCKEditor 添加 Audio Player 按钮 说:

   [...] 网友撰写了一篇文章：为FCKEditor追加Audio Player功能，按照这个步骤，你可以在 FCKEditor 的工具栏添加上 Audio Player [...]

5. 5楼
   10月 9th, 2008 at 5:15 上午 小人物的博客 说:

   不错的博客主题，看起来很清新，请问博主能交换个链接吗？

6. 6楼
   10月 10th, 2008 at 1:02 上午 hiswing 说:

   欢迎欢迎。请在您的网站上添加本网站链接。

7. 7楼
   10月 11th, 2008 at 4:08 上午 aunsen 说:

   好东西啊！

8. 8楼
   10月 13th, 2008 at 1:00 下午 hiswing 说:

   好东西就拿去吧。

9. 9楼
   10月 26th, 2008 at 6:52 上午 wyzel 说:

   为什么不直接打包你修改好的呢
   免得新手修改出错！

10. 10楼
    10月 27th, 2008 at 7:46 下午 hiswing 说:

    谢谢提醒，这次就先这样了，如果下次还有什么比较复杂的改动，我想我会听取你的意见的。

11. 11楼
    10月 28th, 2008 at 12:03 上午 wyzel 说:

    老大啊
    我还是建议你打包下
    我按照你的方法：打开　FCKeditor/editor/lang/zh-cn.js 文件，找到 InsertCodes

    我根本就找不到InsertCodes
    或许是新手吧

    现在真的很需要这个插件
    能打包给地地址么？

12. 12楼
    10月 28th, 2008 at 8:52 下午 hiswing 说:

    OK，即然你这么需要，那么我也不能这么不尽人情。已经打包好了，下载吧。

13. 13楼
    12月 6th, 2008 at 5:09 下午 林晨 说:

    这个功能值得改造一下，经常用到

14. 14楼
    12月 6th, 2008 at 5:46 下午 JoBru 说:

    不错不错～

15. 15楼
    12月 8th, 2008 at 1:40 下午 hiswing 说:

    没错，可以做成插件的形式。

16. 16楼
    12月 8th, 2008 at 3:41 下午 整野 说:

    除了这个Audio Player插件还有其他比较好播放器插件可以推荐吗？我喜欢很简洁的那种样式..

17. 17楼
    12月 9th, 2008 at 10:19 上午 hiswing 说:

    我觉得Audio Player已经足够好了，一直以来我一直用它。

18. 18楼
    12月 10th, 2008 at 12:19 下午 kvsingle 说:

    nihao 请问 我启用插件后 关掉可视化编辑 撰写里什么按钮都没显示啊 ，用你这个插件还要用 其他版本的中文 wordpress工具箱吗？

19. 19楼
    12月 10th, 2008 at 8:20 下午 hiswing 说:

    你说的是FCKEditor没有显示出来吧。这个问题我到是没有遇到，一般启用插件后，在撰写里就可以看到FCKEditor了。不知道你的Wordpress是版本是？

20. 20楼
    12月 11th, 2008 at 8:53 上午 kvsingle 说:

    你好，我说详细点，我吧chenpress这个插件上传后，在后台控制激活启用，然后按照你REMDEM的说明，去掉用户个人资料里的 可视化编辑 前面的钩，可是回到 撰写 面板上面的按钮全看不见啊，我的是265版本的，但是我如果不用你的chenpress插件，直接用fckeditor ，上面的按钮都看的见，没有那个audio 按钮就是了，总之你的插件我启用后没反应，，这怎么办？

21. 21楼
    12月 11th, 2008 at 9:06 上午 hiswing 说:

    chenpress这个插件不是我写的，我只是在此基础上加了一个audio按钮而已。为什么显示不出来，这个我还真没有遇到过，你可以google一下，或直接问chenpress插件的作者(chweifly@gmail.com)。如果你确实需要audio或其它功能，那么请按照本文的方法自己改也是可以的。

22. 22楼
    12月 30th, 2008 at 7:28 下午 jessenie 说:

    提示:未知工具栏项目AudioPlay

我要评论