logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

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

 yanjj 2011-11-30

第一步 在语言文件中加入 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上传组件，一个很不错的开源上传组件。

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： yanjj > 《Javascript》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多