为FCKEditor追加Audio Player功能

最新推荐文章于 2024-05-21 18:49:04 发布

qbb3050466

最新推荐文章于 2024-05-21 18:49:04 发布

阅读量462

点赞数

文章标签： fckeditor audio wordpress插件 wordpress 工具音乐

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 在工具栏追加一个按钮。如下：

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

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

InsertCodes : "插入代码",
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 工具栏上是否增加了一个新按钮呢？如果没有，请选清除浏览器缓存再试。点击这个按钮将弹出如下画面：