Fckeditor code syntax highlighting

First, IE:
1. Legacy problems: hidden source code and formatted code may be faulty.
According to the results of the previous study, the code at the two sites may be incorrect, mainly because of special HTML code, such as the tag <div> in the Code and the & alt in the JavaScript code. The solution here is simple: you only need to replace it, but note that you should replace it before formatting. Because the hidden code also needs to be replaced, it should also be replaced at the end, but it should be reversed. The Code is as follows: Copy codeThe Code is as follows:. replace (/&/g ,"&")
. Replace (/</g, "<")
. Replace (/>/g, '> ');

2. in FCKeditor, many controls have right-click menus to modify their attributes. I also want to add one to highlight the code! I found the FCKeditor official website and added the Code as follows (the code is put in fckplugin. js ):Copy codeThe Code is as follows: // Add a right-click menu
FCK. ContextMenu. RegisterListener ({
AddItems: function (menu, tag, tagName)
{
If (! Tag)
Return;

Var oDiv = tag;

// The function of loop. You can see the code to select the top-level element of the highlighted code.
While (oDiv. parentNode ){
If (oDiv. tagName = usingTag & oDiv. className = usingFlag)
Break;
ODiv = oDiv. parentNode;
}

// Under what circumstances do we display this option
If (oDiv. tagName = usingTag & oDiv. className = usingFlag) // & (tag. _ FCKHighLighter | tag. parentElement. _ FCKHighLighter ))
{
FCKSelection. SelectNode (oDiv );
// When the option is displayed, show a separator the command
Menu. AddSeparator ();
// The command needs the registered command name, the title for the context menu, and the icon path
Menu. AddItem ('highlighter', FCKLang ['dlgsyntaxhighlighterproperties'], oHighLighterItem. IconPath );
}
}}
);

3. Try it out. When you double-click the modification, you can only double-click the gray value on the left of the number of lines of the Code to bring up the modification. I don't think it is very convenient. If you double-click the code, it will be much more convenient to bring up modifications! Hey, the answer is yes. The previous Code has already registered the double-click event of the DIV tag, so register the SPAN and LI tags used by the formatted code, the Code is as follows (put the code in fckplugin. js ):Copy codeThe Code is as follows: // Add a double-click event
FCK. RegisterDoubleClickHandler (FCKHighLighter. OnDoubleClick, usingTag); // double-click the gray bar.
FCK. RegisterDoubleClickHandler (FCKHighLighter. OnDoubleClick, 'span '); // double-click the code
FCK. RegisterDoubleClickHandler (FCKHighLighter. OnDoubleClick, 'lil'); // double-click the blank area of the Code.
// Add a double-click event
FCK. RegisterDoubleClickHandler (FCKHighLighter. OnDoubleClick, usingTag); // double-click the gray bar.
FCK. RegisterDoubleClickHandler (FCKHighLighter. OnDoubleClick, 'span '); // double-click the code
FCK. RegisterDoubleClickHandler (FCKHighLighter. OnDoubleClick, 'lil'); // double-click the blank area of the Code.

4. Try again. You can double-click the number of lines in the code to modify them. But double-click the code and you will not be able to obtain the hidden source code. The reason is that double-clicking is not a top-level element in the Code. It is easy to modify the double-click code and get the top-level element (the code is placed in fckplugin. js ):Copy codeThe Code is as follows: // double-click the event processing code
FCKHighLighter. OnDoubleClick = function (div ){
Var oDiv = div;

// The function of loop. You can see the code to select the top-level element of the highlighted code.
While (oDiv. parentNode ){
If (oDiv. tagName = usingTag & oDiv. className = usingFlag)
Break;
ODiv = oDiv. parentNode;
}

If (oDiv. tagName = usingTag & oDiv. className = usingFlag ){
FCKSelection. SelectNode (oDiv );
FCKCommands. GetCommand ('highlighter'). Execute ();
}
}

5. When the editor is transferred to the source code and then transferred back, it is found that the highlighted code is no longer editable. It is found that the attribute used for identification is missing because the attribute of this identity is not a standard HTML attribute. You can use the class attribute at the top level. This is simple and I will not give the code.
The modification in IE is complete and perfect.
FF:
I use the system and software. Sometimes I use FF. Therefore, FF must be supported for modifications. Besides, FCKeditor is compatible with IE and FF, and the added plug-in only supports IE.
1. First, I tried the effect: I found that it can be inserted, but it cannot be modified. Double-click events are also valid, but cannot be modified. This is because FF is different from IE. in IE, you can directly select the DIV tag, but not in FF. Therefore, you need to add a click event to let the Code help FF select the top-level element. The original code is copied from the Placeholder plug-in of FCKeditor (the code is placed in fckplugin. js ):Copy codeThe Code is as follows: // click the event processing code
FCKHighLighter. _ ClickListener = function (e)
{
Var oDiv = e.tar get;

// The function of loop. You can see the code to select the top-level element of the highlighted code.
While (oDiv. parentNode ){
If (oDiv. tagName = usingTag & oDiv. className = usingFlag)
Break;
ODiv = oDiv. parentNode;
}

If (oDiv. tagName = usingTag & oDiv. className = usingFlag)
FCKSelection. SelectNode (oDiv );
}

FCKHighLighter. _ SetupClickListener = function (){
If (FCKBrowserInfo. IsGecko)
FCK. EditorDocument. addEventListener ('click', FCKHighLighter. _ ClickListener, true );
}

// Add a click event
FCK. Events. AttachEvent ('onaftersethtml ', FCKHighLighter. _ SetupClickListener );

// Right-click the menu
FCK. ContextMenu. RegisterListener ({
AddItems: function (menu, tag, tagName)
{
If (! Tag)
Return;

Var oDiv = tag;

// The function of loop. You can see the code to select the top-level element of the highlighted code.
While (oDiv. parentNode ){
If (oDiv. tagName = usingTag & oDiv. className = usingFlag)
Break;
ODiv = oDiv. parentNode;
}

// Under what circumstances do we display this option
If (oDiv. tagName = usingTag & oDiv. className = usingFlag) // & (tag. _ FCKHighLighter | tag. parentElement. _ FCKHighLighter ))
{
FCKSelection. SelectNode (oDiv );
// When the option is displayed, show a separator the command
Menu. AddSeparator ();
// The command needs the registered command name, the title for the context menu, and the icon path
Menu. AddItem ('highlighter', FCKLang ['dlgsyntaxhighlighterproperties'], oHighLighterItem. IconPath );
}
}}
);

Note: The core code of FCKeditor needs to be modified because I found that the selected elements cannot be modified under FF in version 2.5.1, but the latest version 2.6 is available. Therefore, you need to modify the getselectedelemententin the _ source \ internals \ fckselection_gecko.js file and use the official tool fckpackager.exe to re-package JavaScript code. I will try again later.
It's almost done here, but there are still some minor issues not mentioned. For example, you can directly modify the highlighted code (add a contentEditable = 'false' for the label ), for JavaScript code compatibility, use parentNode instead of parentElement.
I wanted to add a Real-Time syntax highlighting editor in the Add code window. However, there are some bugs in CodePress and EditArea, especially in ie7, so we will not add it for the moment. Modify it later.
Adding this plug-in is much easier to modify. If you have any questions, leave a message and I will try my best to answer them for you.
The next step is to add an online Image Upload plug-in for FCKeditor. This makes it much easier to repost an article elsewhere. Click here to automatically upload all the images...