为FCKeditor开发插入"InsertMusic"Mp3播放器插件
在很多时候都会听到很不错的歌,有就了想把这些歌曲发到博客的想法。不过FCKeditor没有这样的简洁方便的功能,就有了给FCKeditor写这样一个插件的想法
插件效果演示:
在之前已经讲过了开发FCKeditor插件的方法,这个播放器想对起来是很简单的。
首先在FCKeditor/editor/plugins/新建一个insertmusic目录,下载Flash的Mp3播放器,放到这个目录
下载insertmusic.gif文件到FCKeditor/editor/plugins/insertmusic/目录
在FCKeditor/editor/plugins/insertmusic/目录下新建fckplugin.js、insertmusic.html
fckplugin.js文件内容如下:
//插入音乐
FCKCommands.RegisterCommand('InsertMusic', new FCKDialogCommand('InsertMusic', FCKLang.InsertMusic, FCKPlugins.Items['insertmusic'].Path + 'insertmusic.html', 370,120)) ;
var insertcodeItem = new FCKToolbarButton('InsertMusic', FCKLang.InsertMusic) ;
insertcodeItem.IconPath = FCKPlugins.Items['insertmusic'].Path + 'insertmusic.gif';
FCKToolbarItems.RegisterItem('InsertMusic', insertcodeItem);
FCKCommands.RegisterCommand('InsertMusic', new FCKDialogCommand('InsertMusic', FCKLang.InsertMusic, FCKPlugins.Items['insertmusic'].Path + 'insertmusic.html', 370,120)) ;
var insertcodeItem = new FCKToolbarButton('InsertMusic', FCKLang.InsertMusic) ;
insertcodeItem.IconPath = FCKPlugins.Items['insertmusic'].Path + 'insertmusic.gif';
FCKToolbarItems.RegisterItem('InsertMusic', insertcodeItem);
insertmusic.html文件内容如下:请注意修改mp3player.swf的路径
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>Insert Music</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://www.cnblogs.com/dialog/common/fck_dialog_common.js" type="text/javascript"></script>
<script type="text/javascript">
var oEditor = window.parent.InnerDialogLoaded() ;
var oDOM = oEditor.FCK.EditorDocument ;
var oActiveEl = oEditor.FCKSelection.GetSelectedElement() ;
window.onload = function()
{
window.parent.SetOkButton( true ) ;
window.parent.SetAutoSize( true ) ;
SelectField('txtMusicUrl') ;
}
function Ok()
{
var sMusicUrl = GetE('txtMusicUrl').value ;
if ( sMusicUrl.length == 0 )
{
alert("音乐网址不能为空") ;
return false ;
}
var sMusicHtml ; //这里mp3player.swf请使用你的mp3player.swf的绝对路径
sMusicHtml = "<object id=\"audioplayer\" type=\"application/x-shockwave-flash\" height=\"24\" width=\"300\"";
sMusicHtml = sMusicHtml + " data=\"http://www.moozi.net/fckeditor/editor/plugins/mzplugins/mp3player.swf\">";
sMusicHtml = sMusicHtml + " <param value=\"http://www.moozi.net/fckeditor/editor/plugins/mzplugins/mp3player.swf\" name=\"movie\" />";
sMusicHtml = sMusicHtml + " <param value=\"soundFile=" + sMusicUrl + "\" name=\"FlashVars\" />";
sMusicHtml = sMusicHtml + " <param value=\"high\" name=\"quality\" />";
sMusicHtml = sMusicHtml + " <param value=\"false\" name=\"menu\" />";
sMusicHtml = sMusicHtml + " <param value=\"#FFFFFF\" name=\"bgcolor\" />";
sMusicHtml = sMusicHtml + "</object>";
oEditor.FCK.InsertHtml(sMusicHtml);
return true ;
}
</script>
</head>
<body style="overflow: hidden">
<table height="100%" width="100%">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="80%">
<tr>
<td>
<span>Mp3网址:</span><br />
<input id="txtMusicUrl" style="width: 360px;" type="text" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Insert Music</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://www.cnblogs.com/dialog/common/fck_dialog_common.js" type="text/javascript"></script>
<script type="text/javascript">
var oEditor = window.parent.InnerDialogLoaded() ;
var oDOM = oEditor.FCK.EditorDocument ;
var oActiveEl = oEditor.FCKSelection.GetSelectedElement() ;
window.onload = function()
{
window.parent.SetOkButton( true ) ;
window.parent.SetAutoSize( true ) ;
SelectField('txtMusicUrl') ;
}
function Ok()
{
var sMusicUrl = GetE('txtMusicUrl').value ;
if ( sMusicUrl.length == 0 )
{
alert("音乐网址不能为空") ;
return false ;
}
var sMusicHtml ; //这里mp3player.swf请使用你的mp3player.swf的绝对路径
sMusicHtml = "<object id=\"audioplayer\" type=\"application/x-shockwave-flash\" height=\"24\" width=\"300\"";
sMusicHtml = sMusicHtml + " data=\"http://www.moozi.net/fckeditor/editor/plugins/mzplugins/mp3player.swf\">";
sMusicHtml = sMusicHtml + " <param value=\"http://www.moozi.net/fckeditor/editor/plugins/mzplugins/mp3player.swf\" name=\"movie\" />";
sMusicHtml = sMusicHtml + " <param value=\"soundFile=" + sMusicUrl + "\" name=\"FlashVars\" />";
sMusicHtml = sMusicHtml + " <param value=\"high\" name=\"quality\" />";
sMusicHtml = sMusicHtml + " <param value=\"false\" name=\"menu\" />";
sMusicHtml = sMusicHtml + " <param value=\"#FFFFFF\" name=\"bgcolor\" />";
sMusicHtml = sMusicHtml + "</object>";
oEditor.FCK.InsertHtml(sMusicHtml);
return true ;
}
</script>
</head>
<body style="overflow: hidden">
<table height="100%" width="100%">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="80%">
<tr>
<td>
<span>Mp3网址:</span><br />
<input id="txtMusicUrl" style="width: 360px;" type="text" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
再在这个目录下新建lang目录,在FCKeditor/editor/plugins/insertmusic/lang下新建en.js,zh-cn.js
en.js内容如下:
FCKLang.InsertMusic = 'Insert Music' ;
zh-cn.js内容如下:
FCKLang.InsertMusic = '插入音乐' ;
最后把这个插件加到工具栏,打开FCKeditor/fckconfig.js,在
// FCKConfig.Plugins.Add( 'autogrow' ) ;
后添加一行,加入:
FCKConfig.Plugins.Add( 'insertmusic' , 'zh-cn,en' ) ;
OK,看奥运了^_^