Add a custom toolbar for FCKeditor

FCKeditor is a powerful open-source online editor, so it is very suitable for people who have nothing to do with it ~~~ Haha. Even if a product has powerful functions, it cannot meet the needs of all users. Of course, FCKeditor is no exception. Taking the system (workflow) I have developed as an example, I have encountered a situation where FCKeditor cannot meet my requirements. Because I want to add my own operation control button in the toolbar, of course, the configuration cannot be changed. Source code . You can see the JS source code after FCKeditor is processed, and the header is immediately larger-no line breaks, no comments, a lot of JS Code There is almost no way to understand it. Of course, it is also advantageous to do so, or how can this large thing be loaded so quickly. We can see the source code of the processed JS source code, so we got a 2.4 FCKeditor online. Now let's start adding our own operation menu to the toolbar step by step.

For example, I want to add my own input box to control the Date input, that is, the input box can only select a date by selecting it. This is done by using the date control my97, make full use of existing results. Some people may say that the dialog box that I directly modify is not enough. Of course, this is also possible, but what we want to do today is to add our own toolbar operations so that we can then and so on, add any operation you want to add :-).

first, set a name for this date input box, which is ctrl_date. The first step is directly in fckconfig. the basic toolbar set in the JS file (fckconfig. add this name to toolbarsets ["Basic"]. It's easy to add it. Then, you have to give it a Chinese name or something, directly open the language file zh-cn.js, English no matter the HA, add: ctrl_date: "date control ". In addition, you must add a context language prompt menu so that you can right-click the attribute in the editing area to edit the menu. Also add: ctrldateprop: "date control properties" in the zh-ch.js ". Now, we have to go back to the fckconfig. js file. We add ctrl_date to fckconfig. contextmenu so that it can have the context menu. Now, the basic work has been completed. Well, there is an arduous source code transformation project. Of course, don't be afraid of it. Step by step, no problem ~~ @

decompress the downloaded fckeditor2.4 and find fckregexlib. JS file, find the namedcommands in it, add ctrl_date to the end, and then modify FCKeditor's final JS file fckeditorcode_ie.js after processing (only change IE, and leave FF alone, sorry, hey ). What Program can be used for source code packaging on the Internet? I didn't see it in the next package, therefore, you only need to manually modify the final file. Find the namedcommands location in the file and add ctrl_date at the end, so that a command ctrl_date is registered. Then find the fckcommands. js file in the source code folder. Do you see many cases? Oh, this is the command for each operation in the toolbar. We add the following code to the end: Case 'ctrl _ date': ocommand = new fckdialogcommand ('ctrl _ date', fcklang. ctrl_date, 'Dialog/workflow/fck_ctrl_date.html ', 380,230); break; this means, when you click the date control on the toolbar, the webpage file dialog/workflow/fck_ctrl_date.html will be opened in the mode dialog box, so we will talk about the content later. After writing it, we can add it to the fckeditorcode_ie.js file. In the fckeditorcode_ie.js file, locate the new fckundefinedcommand () location, and then add the code we just wrote after the new fckundefinedcommand (note that you should change the ocommand to B before adding it, because my final processing source code is B, it is estimated that this is also abbreviated to reduce the size of the source code ). After the two steps are completed, you can click the date control in the toolbar to open the webpage file for editing the date control property.

another project is to add the context menu of the control. Otherwise, the properties and dialog box of the input box will pop up when right-clicking the editing area. This is not the result we want. We should first modify the source code and then copy it to the final source code file. Find the fcktoolbaritems. js file, and there are many cases. You can see that this is the button item in the toolbar. Similarly, we add: Case 'ctrl _ date': oitem = sequence index of the mark in the new items file at the end.) We use the same icon as the input box, which is 51. Similarly, we look for the string alert (fcklang. unknowntoolbaritem. replace (/% 1/g (remove spaces), and add the statement we just wrote before default (Change oitem to B ). This is the first step to complete the context menu, and the second step is the last step. The victory is in front of you. Come on, haha.

the file fck_contextmenu.js is modified. There are also many cases. We Add the following statement
case 'ctrl _ date': Return {additems: function (a, B, c) {If (C = 'input' & B. type = 'text' & B. classname = '_ wf_date') {. addseparator ();. additem ('ctrl _ input', fcklang. ctrldateprop, 51) ;}}; (note that menu, tag, and tagname in the source code are written as A, B, C is to directly insert it into the final code ). Did you notice that there is a B. classname = '_ wf_date' in the above section? This is because FCKeditor has built-in input box control, so here we use a style name to distinguish whether it comes with our own. Of course, this sample name can be used at will, and in the fck_ctrl_date.html webpage file (we write to edit the property file of the date control) to distinguish the original input box, add the classname = "_ wf_date" attribute to the date control, that is, the input box. Of course, we also need to modify the original input case and find the string 'textfield 'in the fckeditorcode_ie.js file: Return {additems location (if not found, remove or add spaces ), then, modify the conditions in the IF statement and add a & B. classname! = '_ Wf_date '. Finally, we can add the code above to the textfield case. After this modification, When you right-click an element, if it is an input box and the style name is not the date control we specified, it will call its built-in input box property to edit the webpage, if the style name is the name of the date control we have defined, the property webpage we have edited will be called, in this way, you can call different attributes to edit webpages when viewing attributes in the same input box.

After completing all the preceding steps, you can save the modified fckeditorcode_ie.js file. . You can copy the content of fckeditor's fck_textfield.html webpage file directly, and then simply modify it, but it is important that you do not forget to add the classname = "_ wf_date" attribute to your date control in the OK function, otherwise, the editing Page entered in the text box of FCKeditor will be called when you right-click the attribute to view it.

All the steps have been completed. Open your online editor ~~~~