It's nice to modify the FCKeditor modification Method _ Web page Editor

Source: Internet
Author: User

Modified code Downloads http://www.cnblogs.com/files/truly/fckeditor_truly.rar
Local Download Address
Due to the needs of the project, FCKeditor has been carefully studied recently. Find bugs and things that are missing.

First, prevent continuous text from causing the scroll bar
        FCKeditor Editor to work with an IFRAME to handle editor content, but it does not support text wrapping. If you enter a continuous paragraph of English or digital, there will be scroll bar, then we need to add word-wrap style to Break-word;

There are many ways to add, I choose the most convenient way to modify: The practice is to modify the fckeditor.html file, to <iframe id= "Eeditorarea" Increase event onload= "window.frames[' Eeditorarea '].document.body.style.wordwrap= '" Break-word ' "

Two, add media and Realplay button
       This work is relatively large, to modify a lot of JS files, as well as some pictures and style files.
      a. Preparing pictures: Fckeditor\editor\css\images below, add fck_medialogo.gif and Fck_ Realplaylogo.gif, the size of a random, centered as the background. The
Fckeditor\editor\skins\default\toolbar\ adds Media.gif and realplay.gif, and other skin analogies.
      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 to Realplay to do the sample
Fckeditor\editor\js\fckeditorcode_ie_1.js, in 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);

Then modify the Fck.getrealelement method for the following code, which is used to adjust the width and height of the editor
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 method increases
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 method increases

Case ' media ': b=new Fcktoolbarbutton (' media ', fcklang.insertmedialbl,fcklang.insertmedia);
Break
Case ' Realplay ': b=new Fcktoolbarbutton (' Realplay ', fcklang.insertrealplaylbl,fcklang.insertrealplay);
Break
Fckcontextmenu._getgroup method increases
Case ' media ': Return to New Fckcontextmenugroup (True,this, ' media ', fcklang.mediaproperties,true);
Case ' Realplay ': Return to New Fckcontextmenugroup (True,this, ' Realplay ', fcklang.realplayproperties,true); Truly

Fckcontextmenu.refreshstate method increases
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 '));


Then to add the ' dialog/fck_media.html ' and ' dialog/fck_realplay.html ' page, I am lazy to write, myself to my source download to see, I was in 2. 1 on the basis of the change, 2.2 to do some adjustment!

Fckconfig.js also has more adjustment, but this document is very simple, I go to see my source code bar.
Then there is the definition of the constant in the Lang directory, which is easy to find, nothing to say.

And then it's OK,:.



Third, add Delete button column, similar to Sina's blog in the Edit control

Four, modify the upload path
The default is the root directory/userfiles, there are many ways to modify, first look at its source code:
Protected string Userfilespath
{
Get
{
if (Suserfilespath = null)
{
Try to get from the "application".
Suserfilespath = (string) application["Fckeditor:userfilespath"];

The

   //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)
    {
& Nbsp;    suserfilespath = system.configuration.configurationsettings.appsettings["FCKeditor: Userfilespath "];

     //Otherwise use the default value.
     if (Suserfilespath = null | | | suserfilespath.length = 0)
    & Nbsp; suserfilespath = Default_user_files_path;

The

     //Try to get from the URL.
     if (Suserfilespath = null | | | suserfilespath.length = 0)
   & nbsp; {
      suserfilespath = request.querystring["ServerPath"];
&NBSP;&NBSP;&NBSP;&NBSP;&NBSP}
    }
   

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

Thus, you can set application["Fckeditor:userfilespath", or session, in global or anywhere in the program (where it can be run before loading FCKeditor). or webconfig, or request parameters in action.


To IS continued ...


Attached: JS version fckeditor download: http://prdownloads.sourceforge.net/fckeditor/fckeditor_2.2. Zip
. NET edition
http://prdownloads.sourceforge.net/fckeditor/fckeditor.net_2.2. Zip
All versions list
http://prdownloads.sourceforge.net/fckeditor

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.