欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

比较不错的修改FCKEditor的修改方法

程序员文章站 2022-03-02 07:53:24
修改后的代码下载http://www.cnblogs.com/files/truly/fckeditor_truly.rar由于项目需要,近期仔细研究了fckeditor。...

修改后的代码下载http://www.cnblogs.com/files/truly/fckeditor_truly.rar

由于项目需要,近期仔细研究了fckeditor。发现一下bug,以及缺少的一些东西。

一、防止连续文本导致出现滚动条
        fckeditor编辑器使用iframe来处理编辑器内容,可惜不支持文本换行,假如你连续输入一段英文或数字等,将会出现滚动条,这时我们需要给其增加word-wrap样式为break-word;

添加方式有很多,我选择最便捷的修改方式:具体做法是修改fckeditor.html文件,给<iframe id="eeditorarea" 增加事件 onload="window.frames['eeditorarea'].document.body.style.wordwrap='break-word'"

二、增加media以及realplay按钮
      此项工作相对庞大,要修改很多js文件,以及一些图片和样式文件。
      a.准备图片:fckeditor\editor\css\images下面,添加fck_medialogo.gif和fck_realplaylogo.gif,大小随意,作为背景居中显示的。
fckeditor\editor\skins\default\toolbar\增加media.gif和realplay.gif,其他皮肤类推。
      b.修改css:给fckeditor\editor\css\fck_internal.css增加

.fck__media
{
 border: darkgray 1px solid;
 background-position: center center;
 background-image: url(images/fck_medialogo.gif);
 background-repeat: no-repeat;
 width: 80px ;
 height: 80px ;
}

.fck__realplay
{
 border: darkgray 1px solid;
 background-position: center center;
 background-image: url(images/fck_realplaylogo.jpg);
 background-repeat: no-repeat;
 width: 80px ;
 height: 80px ;
}
c。修改js,主要以realplay做示例
fckeditor\editor\js\fckeditorcode_ie_1.js,在fckdocumentprocessors.additem(fckflashprocessor);后面增加
// realplay begin
var fckrealplayprocessor=new object();
fckrealplayprocessor.processdocument=function(a){
    var b=a.getelementsbytagname('embed');
    var c;
    var i=b.length-1;

while (i>=0&&(c=b[i--])){
if (c.src.endswith('.rm',true) || c.src.endswith('.ram',true) || c.src.endswith('.ra',true))
{var d=fckdocumentprocessors_createfakeimage('fck__realplay',c.clonenode(true));
d.setattribute('_fckrealplay','true',0);
fckrealplayprocessor.refreshview(d,c);
c.parentnode.insertbefore(d,c);
c.parentnode.removechild(c);
};
};
};

fckrealplayprocessor.refreshview=function(a,b){
    if (b.width>0) a.style.width=fcktools.converthtmlsizetostyle(b.width);
    if (b.height>0) a.style.height=fcktools.converthtmlsizetostyle(b.height);
};
fckdocumentprocessors.additem(fckrealplayprocessor);
// realplay end
var fckmediaprocessor=new object();
fckmediaprocessor.processdocument=function(a)
{
    var b=a.getelementsbytagname('embed');
    var c;
    var i=b.length-1;
    while (i>=0&&(c=b[i--]))
    {
        if (c.src.endswith('.avi',true) || c.src.endswith('.mpg',true) || c.src.endswith('.mpeg',true))
        {
            var d=fckdocumentprocessors_createfakeimage('fck__media',c.clonenode(true));
            d.setattribute('_fckmedia','true',0);fckmediaprocessor.refreshview(d,c);
            c.parentnode.insertbefore(d,c);c.parentnode.removechild(c);
        };
    };
};
fckmediaprocessor.refreshview=function(a,b)
{
    if (b.width>0) a.style.width=fcktools.converthtmlsizetostyle(b.width);
    if (b.height>0) a.style.height=fcktools.converthtmlsizetostyle(b.height);
};
fckdocumentprocessors.additem(fckmediaprocessor);

然后修改fck.getrealelement方法为下面代码,该方法为处理编辑器中width和height的调整
fck.getrealelement=function(a){
var e=fcktempbin.elements[a.getattribute('_fckrealelement')];

if (a.getattribute('_fckflash')|| a.getattribute('_fckrealplay') || a.getattribute('_fckmedia')){
    if (a.style.width.length>0) e.width=fcktools.convertstylesizetohtml(a.style.width);
    if (a.style.height.length>0) e.height=fcktools.convertstylesizetohtml(a.style.height);
};
return e;};

----------
fckeditor\editor\js\fckeditorcode_ie_2.js
fckcommands.getcommand方法增加
case 'media':b=new fckdialogcommand('media',fcklang.dlgmediatitle,'dialog/fck_media.html',450,400);
break;
case 'realplay':b=new fckdialogcommand('realplay',fcklang.dlgmediatitle,'dialog/fck_realplay.html',450,400);
break;

fcktoolbaritems.getitem方法增加

case 'media':b=new fcktoolbarbutton('media',fcklang.insertmedialbl,fcklang.insertmedia);
break;
case 'realplay':b=new fcktoolbarbutton('realplay',fcklang.insertrealplaylbl,fcklang.insertrealplay);
break;
fckcontextmenu._getgroup方法增加
case 'media':return new fckcontextmenugroup(true,this,'media',fcklang.mediaproperties,true);
case 'realplay':return new fckcontextmenugroup(true,this,'realplay',fcklang.realplayproperties,true);   // truly

fckcontextmenu.refreshstate方法增加
if (this.groups['media'])   this.groups['media'].setvisible(b=='img'&&a.getattribute('_fckmedia'));
if (this.groups['realplay'])  this.groups['realplay'].setvisible(b=='img'&&a.getattribute('_fckrealplay'));


然后要增加'dialog/fck_media.html'和'dialog/fck_realplay.html'页面,具体我懒得再写了,自己到我的源码下载里看,我是在2。1的基础上改的,2.2要做一些调整!

fckconfig.js也有较多调整,但是这个文件非常简单,自己去看我的源码吧。
然后就是lang目录中对常量的定义,搜索一下就很容易得到,没什么可讲。

在然后就可以了,:)。



三、添加删除按钮列,类似sina的blog中的编辑控件

四、修改上传路径
        默认是根目录/userfiles,有多种方式进行修改,先看一下它的源码:
protected string userfilespath
{
 get
 {
  if ( suserfilespath == null )
  {
   // try to get from the "application".
   suserfilespath = (string)application["fckeditor:userfilespath"] ;

   // try to get from the "session".
   if ( suserfilespath == null || suserfilespath.length == 0 )
   {
    suserfilespath = (string)session["fckeditor:userfilespath"] ;

    // try to get from the web.config file.
    if ( suserfilespath == null || suserfilespath.length == 0 )
    {
     suserfilespath = system.configuration.configurationsettings.appsettings["fckeditor:userfilespath"] ;

     // otherwise use the default value.
     if ( suserfilespath == null || suserfilespath.length == 0 )
      suserfilespath = default_user_files_path ;

     // try to get from the url.
     if ( suserfilespath == null || suserfilespath.length == 0 )
     {
      suserfilespath = request.querystring["serverpath"] ;
     }
    }
   }

   // check that the user path ends with slash ("/")
   if ( ! suserfilespath.endswith("/") )
    suserfilespath += "/" ;
  }
  return suserfilespath ;
 }
}

由此,可以在global里或者程序任意位置(加载fckeditor前可以运行到的位置)设置application["fckeditor:userfilespath"] ,或者session,或者webconfig,或者action中的请求参数等。


to be continued...


附:js版fckeditor下载:http://prdownloads.sourceforge.net/fckeditor/fckeditor_2.2.zip
.net版
http://prdownloads.sourceforge.net/fckeditor/fckeditor.net_2.2.zip
所有版本列表