) How does FCKeditor customize the Add toolbar button?

First, open the fckconfig. js file under FCKeditor and find fckconfig. toolbarsets ["default"] and
Fckconfig. contextmenu
Add "insertcode" after them, which is of course the name of the toolbar to be added. Then, in the "FCKeditor/Editor/lang/" folder
Find the zh-cn.js, add the following 2 sentences behind the last line:

// Custom

Insertcode: "insert code ",

Insertcodeprop: "inserting Code attributes"

Note that before the two sentences, dlgaboutinfo: "For more information, visit" and add a comma. Of course, you can also modify the JS files in other languages in the same way. I modified the traditional Zh. js and the English EN. js files.

 

Now we have defined the toolbar and started the second step. Open fckeditorcode_gecko.js and fckeditorcode_ie.js under "FCKeditor/Editor/JS/", and we will register the toolbar;

Step 1: search for "inserthorizontalrule" in the two files and add "insertcode" to the end ".

Step 2: search for "Default: If (fckregexlib" in two files, and add the following sentence before "default:

Case 'insertcode': B = new fckdialogcommand ('insertcode', fcklang. insertcode, 'Dialog/insertcode/insertcode.htm', 510,450); break;

The insertcode.htm file is opened when you click the toolbar icon, which defines the height and width. We will talk about the file content later.

Step 3: search for "Default: Alert (fcklang. unknowntoolbaritem" in the two files. Add the following sentence before "default:

Case 'insertcode': B = new fcktoolbarbutton ('insertcode', fcklang. insertcode, null, 67 );

This statement defines the toolbar icon. The default icon file of FCKeditor is "FCKeditor/Editor/skins/default/example fck_strip.gif image. Because I do not want to use a duplicate default icon, therefore, a small image is added:

(20*20)

By default, the image size is 16*2056, And the canvas is extended to 16*2072 with PS. Then, you can put your small image at the bottom. In this way, the custom image is exactly 67 characters in length. You can add this image to the new feature in the future.

Okay. After three steps, we have added the custom toolbar. (After about, if you want to add the statement to the middle, you can add the statement to the front of the corresponding case in the second and third steps .)

 

After doing so much, the task is 1/3 completed. Come on!

The following is the definition of “insertcode.htm:

 

Add an insertcodefolder under FCKeditor/Editor/dialog/folder and create an htmfile insertcode.htm. Copy the code first.
Bay "FCKeditor/Editor/dialog/fck_textfield.html" file, all right, the major operation starts:

 

 
First, add "insert code" in "<title> </title>"
Properties, which is the title of the new form to be opened. Modify the reference of FCKeditor's JS file "common/fck_dialog_common.js ".
It is used as "../common/fck_dialog_common.js", plus the insert code script in the PISCES Editor "<script
Src = "code. js" type = "text/JavaScript"> </SCRIPT> ".

Then change "window. onload = function () "function, delete the if {} else {} in it, delete all the code in function OK (), and add the following two sentences:

Oeditor. fck. inserthtml (Code ());

Window. Parent. Cancel ();

Because
Therefore, the built-in inserthtml function is used to add a string to the FCKeditor editor. The Code () function is used to transmit the string.
The HTML code is changed to the insertcode.htm code in the compiler editor. (I will not provide the code here. I will put the changed code here. Here I will just give a brief description ).

Next we modify the code in the "Code. js" file and

Window. returnvalue = formatecode (STR, language, showline, cancollapse, canallcollapse, allregion );

Window. Close ();

These two sentences are changed to one sentence:

Return formatecode (STR, language, showline, cancollapse, canallcollapse, allregion );

 

Now, you can use the code insertion function. (This step can be completed when other features are added .)

After the completion of the editor image:
 

The last image is not displayed. The following figure is displayed:

 

Hey,
I tried it with great enthusiasm. Ah, how are there so many red XX before the code? Looking at the source code, the original paths for collapsed images are all wrong. This is depressing. I tried n methods and it was useless. Helpless, finally view
Other HTM files in FCKeditor, fckconfig. basepath, are used to obtain the relative path of the Editor folder. In my example
Yes: "/ajaxenabledwebsite1/FCKeditor/Editor /". Now, to get the folder path for storing the collapsed image
To define a variable, open the fckconfig. js file and add the following sentence after the last line of the file:

Fckconfig. codepath = fckconfig. basepath + 'Dialog/insertcode/codeimages /';

With the image path, we can continue to modify the "Code. js" file:

First, add the following three sentences before "function code:

VaR oeditor = Window. Parent. innerdialogloaded ();

VaR fckconfig = oeditor. fckconfig;

VaR codeimagepath = fckconfig. codepath; // obtain the path of the image folder.

Search for "piscestexteditor/codeimages/", replace all with "" (that is, delete all. Note: It is null, not a space ;)

Also search for "piscestexteditor // codeimages //", replace all with ""

After replacement, we will use the path of the folder where the above image is located. Here we use regular expression to replace the string.

Search for "If (showline) STR = addlinenumber (STR);" and add the following two sentences before it:

VaR src = // B (src = ")/B/g;

STR = Str. Replace (SRC, 'src = "'+ codeimagepath); // get the correct path

This means that only the SRC path with the image name of all IMG controls is replaced with the correct relative path.