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

来源:百度文库 编辑:偶看新闻 时间:2024/07/03 09:41:09

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

+展开 -JavaScriptUpFileBtn :"上传文件",


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

+展开 -JavaScriptcase 'File' : oItem = new FCKToolbarButton( 'File' , FCKLang.UpFileBtn, FCKLang.UpFileBtn, null, false, true, null) ; break ;


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

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

+展开 -JavaScriptvar 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里面 加入如下代码

+展开 -JavaScriptcase '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 加入如下代码:如果没有这一步点击出来的对话框一直处于加载状态
--------------------------------------------

+展开 -JavaScriptvar 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

    上传文件

     

     



    
        
            
                
                    源文件
                
            
            
                
                    
                
            
            
                
                    显示文本
                
            
            
                
                    
                
            
            
                
                                       
                
            
        
    



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

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