当前位置： 移动技术网 > IT编程>脚本编程>编辑器 > 比较不错的修改FCKEditor的修改方法

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

2017年12月08日  | 移动技术网IT编程  | 我要评论

修改后的代码下载

由于项目需要，近期仔细研究了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下载：
.net版

所有版本列表

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网