BLOG相关, 作品

为FCKEditor追加Audio Player功能

08-10-04 | 27 Comments |

　　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 播放音乐的代码。

[audio:http://old.jedcast.net/board/upfiles/Westlife%20-%20My%20Love.mp3|autostart=yes]

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


五冠 Nokia/诺基亚 5230 5230XM 送证书V20版 内有港行 销数千台
1000.0元
批发 雷朋3025镜面反光太阳镜 太阳眼镜 19.9/副 顶级质量
19.9元
促销笔记本电脑 13.3英寸超薄N450无线网卡视频
1999.0元

相关文章

  1. 给 FCKEditor 添加 Audio Player 按钮 - WordPress 非官方中文站 : 08-10-05 at 1:13 上午

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

  2. wangyh : 08-10-05 at 5:56 上午

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

  3. hiswing : 08-10-05 at 9:19 上午

    这里的沙发很好坐的哦。

  4. 饿猫公寓 » Blog Archive » 给 FCKEditor 添加 Audio Player 按钮 : 08-10-09 at 12:24 上午

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

  5. 小人物的博客 : 08-10-09 at 5:15 上午

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

  6. hiswing : 08-10-10 at 1:02 上午

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

  7. aunsen : 08-10-11 at 4:08 上午

    好东西啊！

  8. hiswing : 08-10-13 at 1:00 下午

    好东西就拿去吧。

  9. wyzel : 08-10-26 at 6:52 上午

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

  10. hiswing : 08-10-27 at 7:46 下午

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

  11. wyzel : 08-10-28 at 12:03 上午

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

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

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

  12. hiswing : 08-10-28 at 8:52 下午

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

  13. 林晨 : 08-12-06 at 5:09 下午

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

  14. JoBru : 08-12-06 at 5:46 下午

    不错不错～

  15. hiswing : 08-12-08 at 1:40 下午

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

  16. 整野 : 08-12-08 at 3:41 下午

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

  17. hiswing : 08-12-09 at 10:19 上午

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

  18. kvsingle : 08-12-10 at 12:19 下午

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

  19. hiswing : 08-12-10 at 8:20 下午

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

  20. kvsingle : 08-12-11 at 8:53 上午

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

  21. hiswing : 08-12-11 at 9:06 上午

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

  22. jessenie : 08-12-30 at 7:28 下午

    提示:未知工具栏项目AudioPlay

  23. ming709 : 09-05-22 at 4:31 下午

    jessenie :提示:未知工具栏项目AudioPlay

    我的也出现．怎么回事？

  24. chancat : 09-05-31 at 12:49 上午

    唔 非常感谢分享,不过,这样会不会使页面载入时间长

  25. hiswing : 09-05-31 at 10:38 上午

    不会的，放心使用吧。

  26. 羽中 : 10-05-08 at 4:05 下午

    哇噻这个好，很常用的编辑器+播放器！;)

  27. 疯了的蚊子 : 10-05-08 at 5:49 下午

    好就拿去吧。:)

留下您的脚印


«
»