A good method to modify FCKEditor

Source: Internet
Author: User

Modified code download http://www.cnblogs.com/Files/Truly/FCKeditor_Truly.rar
Local
Due to project requirements, FCKEditor has been carefully studied recently. Discover bugs and missing things.

1. Prevent the scroll bar from appearing due to continuous text
The FCKEditor editor uses Iframe to process the editor content. Unfortunately, text line breaks are not supported. If you enter an English or number continuously, a scroll bar will appear, in this case, we need to add the word-wrap style to break-word;

There are many ways to add them. I chose the most convenient way to modify the fckeditor.html file, and added the event onload = "{frames}'eeditorarea'{.doc ument to <iframe id =" eEditorArea. body. style. wordWrap = 'break-word '"

2. Add Media and Realplay buttons
This is a huge job. We need to modify many js files and some image and style files.
A. Prepare the image: FCKeditor \ editor \ css \ images, fill fck_medialogo.gifand fck_realplaylogo.gif. The image is displayed in the center of the background.
FCKeditor \ editor \ skins \ default \ toolbar \ adds media.gifand realplay.gif, and other skins.
B. Modify css: add to FCKeditor \ editor \ css \ fck_internal.css

. FCK _ Media
{
Border: darkgray 1px solid;
Background-position: 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;
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, added to FCKDocumentProcessors. addItem (FCKFlashProcessor );
// Realplay begin
Var FCKRealplayProcessor = new Object ();
FCKRealplayProcessor. ProcessDocument = function (){
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 ('. a', 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 ()
{
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 to the following code. This method is used to adjust the width and height in the editor.
FCK. GetRealElement = function (){
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
Added the FCKCommands. GetCommand method.
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;

Added the FCKToolbarItems. GetItem method.

Case 'Media ': B = new FCKToolbarButton ('Media', FCKLang. InsertMediaLbl, FCKLang. InsertMedia );
Break;
Case 'realplay': B = new FCKToolbarButton ('realplay', FCKLang. InsertRealplayLbl, FCKLang. InsertRealplay );
Break;
Added the FCKContextMenu. _ GetGroup method.
Case 'media': return new FCKContextMenuGroup (true, this, 'media', FCKLang. MediaProperties, true );
Case 'realplay': return new FCKContextMenuGroup (true, this, 'realplay', FCKLang. RealplayProperties, true); // truly

Added the FCKContextMenu. RefreshState method.
If (this. groups ['media']) this. groups ['media']. setVisible (B = 'img '&. getAttribute ('_ fckmedia '));
If (this. groups ['realplay']) this. groups ['realplay']. setVisible (B = 'img '&. getAttribute ('_ fckrealplay '));

Then we need to add the "dialog/fck_Media.html" and "dialog/fck_Realplay.html" pages. I am too lazy to write them again. I will download the source code myself. I am at 2. On the basis of 1, 2.2 should make some adjustments!

Fckconfig. js also has many adjustments, but this file is very simple. Check my source code.
Then there is the definition of constants in the lang directory. It is easy to search for them and there is nothing to talk about.

Then you can ,:).

3. add and delete button columns, similar to the Edit Control in sina's blog

4. Modify the upload path
By default, it is the root directory/UserFiles. There are multiple ways to modify it. Let's take a look at its source code:
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. receivettings ["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;
}
}

Therefore, you can set Application ["fckeditor: UserFilesPath"], Session, or Webconfig in Global or at any position of the Program (which can be run before FCKeditor is loaded, or the Request Parameters in the action.

To be continued...

Attachment: js FCKEditor download: http://prdownloads.sourceforge.net/fckeditor/FCKeditor_2.2.zip
. Net
Http://prdownloads.sourceforge.net/fckeditor/FCKeditor.Net_2.2.zip
All Versions
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.