SoFunction
Updated on 2025-04-07

A good way to modify FCKEditor

Modified code download/Files/Truly/FCKeditor_Truly.rar
Local download address
Due to project requirements, FCKEditor has been carefully studied recently. Discover some bugs and some missing things.

1. Prevent continuous text from causing scroll bars
The FCKEditor editor uses Iframe to process editor content, but unfortunately it does not support text wrapping. If you enter a paragraph of English or numbers continuously, a scroll bar will appear. At this time, we need to add the word-wrap style to break-word;

There are many ways to add, and I chose the most convenient way to modify: the specific method is to modify the file and add an event to <iframe onload="['eEditorArea'].='break-word'"

2. Add Media and Realplay buttons
This work is relatively large, and many js files need to be modified, as well as some picture and style files.
a. Prepare the picture: FCKeditor\editor\css\images, add fck_medialogo.gif and fck_realplaylogo.gif, the size is random, and the center is displayed as the background.
FCKeditor\editor\skins\default\toolbar\add and other skins and so on.
b. Modify css: add to 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. Modify js, mainly using realplay as an example
FCKeditor\editor\js\fckeditorcode_ie_1.js, add after (FCKFlashProcessor);
// Realplay begin
var FCKRealplayProcessor=new Object();
=function(A){
    var B=('EMBED');
    var C;
    var i=-1;

while (i>=0&&(C=B[i--])){
if (('.rm',true) || ('.ram',true) || ('.ra',true))
{var D=FCKDocumentProcessors_CreateFakeImage('FCK__Realplay',(true));
('_fckRealplay','true',0);
(D,C);
(D,C);
(C);
};
};
};

=function(A,B){
    if (>0) =();
    if (>0) =();
};
(FCKRealplayProcessor);
// Realplay end
var FCKMediaProcessor=new Object();
=function(A)
{
    var B=('EMBED');
    var C;
    var i=-1;
    while (i>=0&&(C=B[i--]))
    {
        if (('.avi',true) || ('.mpg',true) || ('.mpeg',true))
        {
            var D=FCKDocumentProcessors_CreateFakeImage('FCK__Media',(true));
            ('_fckmedia','true',0);(D,C);
            (D,C);(C);
        };
    };
};
=function(A,B)
{
    if (>0) =();
    if (>0) =();
};
(FCKMediaProcessor);

Then modify the method to the following code, which handles the adjustment of width and height in the editor
=function(A){
var e=[('_fckrealelement')];

if (('_fckflash')|| ('_fckrealplay') || ('_fckmedia')){
    if (>0) =();
    if (>0) =();
};
return e;};

----------
FCKeditor\editor\js\fckeditorcode_ie_2.js
Methods added
case 'Media':B=new FCKDialogCommand('Media',,'dialog/fck_Media.html',450,400);
break;
case 'Realplay':B=new FCKDialogCommand('Realplay',,'dialog/fck_Realplay.html',450,400);
break;

Methods added

case 'Media':B=new FCKToolbarButton('Media',,);
break;
case 'Realplay':B=new FCKToolbarButton('Realplay',,);
break;
FCKContextMenu._GetGroup method added
case 'Media':return new FCKContextMenuGroup(true,this,'Media',,true);
case 'Realplay':return new FCKContextMenuGroup(true,this,'Realplay',,true);   // truly

Methods added
if (['Media'])   ['Media'].SetVisible(B=='IMG'&&('_fckmedia'));
if (['Realplay'])  ['Realplay'].SetVisible(B=='IMG'&&('_fckrealplay'));


Then I need to add the 'dialog/fck_Media.html' and 'dialog/fck_Realplay.html' pages. I am too lazy to write the details. I went to my source code download to read it myself. I changed it based on 2.1, and I need to make some adjustments in 2.2!

There are also many adjustments, but this file is very simple. Please check my source code by yourself.
Then there is the definition of constants in the lang directory. It is easy to find after searching, and there is nothing to say.

Then it's OK, :).



3. Add delete button columns, edit controls similar to sina blogs

4. Modify the upload path
The default is root directory/UserFiles. There are many ways to modify it. Let’s take a look at its source code first:
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 || == 0 )
   {
    sUserFilesPath = (string)Session["FCKeditor:UserFilesPath"] ;

    // Try to get from the file.
    if ( sUserFilesPath == null || == 0 )
    {
     sUserFilesPath = ["FCKeditor:UserFilesPath"] ;

     // Otherwise use the default value.
     if ( sUserFilesPath == null || == 0 )
      sUserFilesPath = DEFAULT_USER_FILES_PATH ;

     // Try to get from the URL.
     if ( sUserFilesPath == null || == 0 )
     {
      sUserFilesPath = ["ServerPath"] ;
     }
    }
   }

   // Check that the user path ends with slash ("/")
   if ( ! ("/") )
    sUserFilesPath += "/" ;
  }
  return sUserFilesPath ;
 }
}

Therefore, the Application["FCKeditor:UserFilesPath"] can be set in Global or anywhere in the program (the location where it can be run before loading the fckeditor), or the request parameters in the Session, or Webconfig, or action, etc.


to be continued...


Attachment: Download the js version of FCKEditor:/fckeditor/FCKeditor_2.
.net version
/fckeditor/FCKeditor.Net_2.
List of all versions
/fckeditor