First ie:
1, the legacy of the problem: hidden source code and formatting after the problem.
The results of the last study, the two code may be wrong, mainly HTML special code, such as the code has a tag <div>,javascript code in the &alt and so on. The solution here is simple: just replace it, but be careful to replace it before formatting it. Because the hidden code is also to be replaced, the last to take the time to replace back, but to reverse the order. The code is as follows:
Copy Code code as follows:
. replace (/&/g, "&")
. replace (/</g, "<")
. replace (/>/g, ' > ');
2, in the FCKeditor many controls have the right key menu can modify its properties, code highlighting I also want to add one! To the official website of FCKeditor to find a successful increase, the code is as follows (code placed in Fckplugin.js):
Copy Code code as follows:
Add Right button Menu
FCK. Contextmenu.registerlistener ({
Additems:function (menu, tag, tagName)
{
if (!tag)
Return
var odiv = tag;
The function of the loop look at the code to find out, is to select the topmost 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.parenteleme Nt._fckhighlighter))
{
Fckselection.selectnode (ODIV);
When the option was 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[' Dlgsyntaxhighlighterproperty '), Ohighlighteritem.iconpath);
}
}}
);
3, a trial of the effect, found that double-click the modification can only double-click the left side of the code line number of gray to pop-up changes. I think it is not convenient, if you double-click the code can also be a pop-up modification is more convenient! Hey, the answer is yes, the previous code has registered a DIV tag double-click event, so then register the formatted code used in the span and Li tags on it, the code is as follows (code placed in Fckplugin.js):
Copy Code code 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, ' LI '); Double-click the code area blank
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, ' LI '); Double-click the code area blank
4, try again, found that double-click the number of lines of code can be modified here. But double-click the code is not, can not get the hidden source. The reason is because in the code double-click is not the top-level element, that simple, modify the double-click Code, get the top element on the OK (code placed in Fckplugin.js):
Copy Code code as follows:
//Double-click event handling code
Fckhighlighter.ondoubleclick = function (div) {
var odiv = div;
The function of the loop look at the code to find out, is to select the topmost 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, transfer the editor to the source code and then turn back to find that the highlighted code can not be edited. The study found that the attribute used for identification is not available because the attribute of this identity is a nonstandard HTML attribute. This is also good, anyway, the top-level class attribute is useless, directly to use on it. This simple, I will not give the code.
IE in the modification is completed, and relatively perfect.
Back to FF:
I use the system, with software used to compare miscellaneous, and sometimes use FF, so modify the things must support FF. Moreover, the FCKeditor itself is compatible with IE and FF, the addition of Plug-ins only support ie a bit unreasonable.
1, first tried the effect: found that can be inserted, but can not be modified. Double-clicking an event is also valid, but it cannot be modified. This reason is because FF and IE are different, ie can be the div tag directly selected, FF can not. So to add a click event, let the code help FF select the top-level element, and the original code comes from the FCKeditor placeholder plugin (the code is in Fckplugin.js):
Copy Code code as follows:
Click event Handling code
Fckhighlighter._clicklistener = function (e)
{
var odiv = E.target;
The function of the loop look at the code to find out, is to select the topmost 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 Click event
FCK. Events.attachevent (' onaftersethtml ', fckhighlighter._setupclicklistener);
Add Right button Menu
FCK. Contextmenu.registerlistener ({
Additems:function (menu, tag, tagName)
{
if (!tag)
Return
var odiv = tag;
The function of the loop look at the code to find out, is to select the topmost 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.parenteleme Nt._fckhighlighter))
{
Fckselection.selectnode (ODIV);
When the option was 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[' Dlgsyntaxhighlighterproperty '), Ohighlighteritem.iconpath);
}
}}
);
Note: This needs to modify the FCKeditor core code, because I found that in the 2.5.1 version under FF can not modify the selected elements, but the latest 2.6 beta version. So you need to modify the _source\internals\fckselection_ Gecko.js the Getselectedelement function in the file and use the official tool Fckpackager.exe to repackage the JavaScript code, which I am free to write again.
It's almost there, and there are some minor problems, such as: The highlighted code can be modified directly (add a contenteditable= to the tag). False ' is over, JS code compatible to use ParentNode do not use parentelement and so on.
Originally wanted to add code in the window also added a real-time syntax highlighting editor, but the Internet to find a bit more use of codepress and Editarea have some bugs, especially in the IE7, so still temporarily do not add. be amended later.
Add this plug-in modified easily more, if you encounter any problems can leave a message, I will try to answer for you.
The next step for FCKeditor to add an online upload picture plug-ins, so that the article reproduced elsewhere more convenient, click can automatically upload all pictures, ha ha ...
