扩展Fckeditor工具条--添加自定义功能按钮

扩展Fckeditor工具条--添加自定义功能按钮，使用版本 2.6.3

第一步 在语言文件中加入 button的name和名称的键值
以中文语言文件为例lang\zh-cn.js 加入如下代码

-JavaScript

UpFileBtn :"上传文件",

第二步 在_source\internals\fcktoolbaritems.js里面加入如下代码

-JavaScript

case 'File' : oItem = new FCKToolbarButton( 'File' , FCKLang.UpFileBtn, FCKLang.UpFileBtn, null, false, true, null) ; break ;

此代码的作用是在工具栏上显示button及显示的一些设置

FCKToolbarButton定义位置_source\classes\fcktoolbarbutton.js

-JavaScript

var FCKToolbarButton = function( commandName, label, tooltip, style, sourceView, contextSensitive, icon )
{
this.CommandName   = commandName ;
this.Label     = label ;
this.Tooltip    = tooltip ;
this.Style     = style ;
this.SourceView    = sourceView ? true : false ;
this.ContextSensitive = contextSensitive ? true : false ;

if ( icon == null )
   this.IconPath = FCKConfig.SkinPath + 'toolbar/' + commandName.toLowerCase() + '.gif' ;
else if ( typeof( icon ) == 'number' )
   this.IconPath = [ FCKConfig.SkinPath + 'fck_strip.gif', 16, icon ] ;
else
   this.IconPath = icon ;
}

从FCKToolbarButton定义中可以看出工具栏显示图片的路径有三种方式
第一种 把单个按钮图片放入 FCKConfig.SkinPath /'toolbar路径下面图片名称规则是commandName.gif
第二种 把新加的按钮加入到fck_strip.gif中根据绝对位置来显该按钮图片，每个图片高度16px，参数icon是数字（新加按钮在图片中的位置，比如77就表示图片定位到-76*16px)
第三种 直接指定新加按钮的绝对地址，新建按钮图片大小，应该是16*16

第三步：在_source\internals\fckcommands.js里面加入如下代码

-JavaScript

case 'File' : oCommand = new FCKDialogCommand( 'File' , FCKLang.UpFileBtn , 'dialog/fck_file.html' , 450, 390 ) ; break ;

此代码作用是添加按钮对应的点击事件，示例中点击按钮将弹出dialog/fck_file.html页面

修改完第二步和第三步后请使用fckpackager.exe工具重新生成压缩JS，fckpackager.exe和editor、_samples在同一级目录中

第四步：在editor\dialog\ 下新建fck_files\fck_files.js 加入如下代码：如果没有这一步点击出来的对话框一直处于加载状态
--------------------------------------------

-JavaScript

var oEditor        = window.parent.InnerDialogLoaded() ;
var FCK            = oEditor.FCK ;
var FCKLang        = oEditor.FCKLang ;
var FCKConfig    = oEditor.FCKConfig ;
var FCKDebug    = oEditor.FCKDebug ;

var bPreviewInitialized ;

window.onload = function()
{
    window.parent.SetOkButton( true ) ;//"确定"按钮可以用
}

function Ok()//“确定"相应事件
{
    if ( GetE('txtUrl').value.length == 0 )//源文件
    {       
        alert("请选择文件!");
        return false ;
    }
    var oFile;
    oFile = FCK.EditorDocument.createElement( 'a' ) ;
    oFile.href = GetE('txtUrl').value ;
    oFile.target = '_blank';
    oFile.innerHTML = GetE('txtFileName').value ;//显示文字
    oFile = FCK.InsertElementAndGetIt( oFile ) ;
    return true ;
}

--------------------------------------------

第五步 在editor\dialog\ 下新建fck_file.html，你可以在此页面加入你的上传文件代码

-HTML

<html>
<head>
    <title>上传文件</title>

    <script src="common/fck_dialog_common.js" type="text/javascript"></script> 

    <script src="fck_files/fck_files.js" type="text/javascript"></script> 

</head>
<body scroll="no" style="overflow: hidden">
    <div id="divInfo">
        <table cellspacing="0" cellpadding="0" width="100%" border="0">
            <tr>
                <td width="100%">
                    <span>源文件</span>
                </td>
            </tr>
            <tr>
                <td valign="top">
                    <input id="txtUrl" style="width: 100%" type="text" />
                </td>
            </tr>
            <tr>
                <td width="100%">
                    <span>显示文本</span>
                </td>
            </tr>
            <tr>
                <td valign="top">
                    <input id="txtFileName" style="width: 100%" type="text" />
                </td>
            </tr>
            <tr>
                <td>
                    <input id="btnupload" type="button" value="上传文件" style="font-size: 8pt;" />                   
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

第6步在fckconfig.js里面的 FCKConfig.ToolbarSets中加入'File' ，通过上述6步新加的按钮就可以使用了，效果如下图

　　上传示例图片中使用的Swfupload上传组件，一个很不错的开源上传组件。

相关地址：

Fckeditor官网地址：http://www.fckeditor.net/

swfupload官网地址http://www.swfupload.org/ demo地址http://demo.swfupload.org/

　　只可惜一直没有对FCK的JS文件打包成功，每次运行fckpackager.exe都出错，有能运行成功的朋友请告知如何解决，多谢！

来源：http://hi.baidu.com/sam_index/blog/item/2f5eb338b6a518c8d462250b.html

加支付宝好友偷能量挖...

2011-1-26评论(0)网络

阅读(64)喜欢(0)分类：JavaScript/Ajax开发技巧