为FCKeditor开发插入"InsertMusic"Mp3播放器插件

 在很多时候都会听到很不错的歌,有就了想把这些歌曲发到博客的想法。不过FCKeditor没有这样的简洁方便的功能,就有了给FCKeditor写这样一个插件的想法

  

插件效果演示:

在之前已经讲过了开发FCKeditor插件的方法,这个播放器想对起来是很简单的。

首先在FCKeditor/editor/plugins/新建一个insertmusic目录,下载Flash的Mp3播放器,放到这个目录

mp3player.swf (5.14 kb)

下载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);
 

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>
 

再在这个目录下新建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,看奥运了^_^

posted @ 2008-08-10 11:20  木子博客  阅读(2867)  评论(3编辑  收藏  举报