First, open the fck config.js file under fckeditor, and find fckconfig.toolsets ["default"] and fckconfig. And add "InsertCode" after them. This is of course the name of the toolbar you want to add. Then, we found zh-cn.js under the folder "fckeditor\editor\lang" and added the following two sentences after the last line:

//Custom

Insert code: "insert code",

InsertCodeProp: "insert code attribute"

Pay attention to adding a comma after DlgAboutInfo: "For more information, please visit" before these two sentences. Of course, you can also modify js files in other languages in the same way, so I modified the traditional zh.js and English en.js

Now, we have defined the toolbar and started the second important step. We open fckeditorcode_gecko.js and fckeditorcode_ie.js under "fckeditor\editor\js", and we begin to register the toolbar.

Step 1: search for "InsertHorizontalRule" in two files and add "InsertCode" after it.

Step 2: Search for "default:if(fck regxlib)" in two files, and add the following sentence before "default":

case“insert code”:B = new FCKDialogCommand（“insert code”，FCKLang。 InsertCode，‘dialog/insert code/insert code . htm‘，5 10，450）； Break;

When you click the toolbar icon, you open the InsertCode.htm file and define the height and width. As for the contents of the document, we will talk about it later.

Step 3: Search "Default: Alarm (fcklang. Unknown column item ",and add the following sentence before" Default ":

case“insert code”:B = new FCKToolbarButton（“insert code”，FCKLang。 InsertCode，null，null，null，null，67）；

The toolbar icon is defined, and the default icon file of FCKeditor is the fck_strip.gif picture under "fckeditor \ editor \ skins \ default", so I added a small picture because I don't want to use the duplicate default icon:

(20*20)

The default picture is 16*2056. Use PS to lengthen the canvas to 16*2072, and then put your own small picture at the bottom, so that the customized picture just ranks 67th. You can add this picture in turn by adding new features in the future.

All right. After these three steps, we have added a custom toolbar. (After about, if you want to add it in the middle, you can add the added statement to the corresponding Case in the second and third steps just now. )

After doing so much, the task is 1/3, come on!

Let's start defining the InsertCode.htm document:

Add the InsertCode folder under "fckeditor\editor\dialog" and create a new InsertCode.htm htm file. First, copy the code in the file "fckeditor \ editor \ dialog \ fck _ textfield.html". Ok, the main action has begun:

First of all, in "

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

Oedipus. FCK。 insert html（code（））；

window . parent . cancel（）；

Because we added the string in code format to the FCKeditor editor, we used the built-in InsertHtml function, and the code () function passed the string. As for the following html code, I changed it to InsertCode.htm's code in the editor of Pisces (not provided here, I will put the changed code on it, and only give a brief explanation here).

Let's modify the code in the "code.js" file and change the "function code ()"

window . return value = formate code（str，language，showLine，canCollapse，canAllCollapse，all region）；

window.close()。

Replace these two sentences with one sentence:

Returns formate code(str, language, showLine, canCollapse, canAllCollapse, all region);

At this point, you can use the Insert Code function. (You can complete this step when adding other functions. )