FCKEditor Syntaxhighlighter Integration Implementation code highlighting _ Web editor

So the internet to check a lot of information, did not say how to do, is to change their own good package upload. I have studied one of these integrated examples, roughly speaking, to the future development of other FCKeditor Plug-ins also benefit.
For the convenience of everyone, the cloud-Habitat community offers two versions that have been made into plug-ins. Download Address
Step one: Find "editor\plugins\" in the FCKeditor path and create a "highlighter" folder in it.

The second step: Will "DP." Syntaxhighlighter\scripts folder copied to this folder, all JS files and a flash file to copy over.

Step three: Create the "lang" folder in "Highlighter\", where the new "Zh-cn.js" file is created, as follows-

Copy Code code as follows:

FCKLANG.CODEBTN = ' Insert highlight code ';
Fcklang.codearea = ' Code ';
Fcklang.codedlgtitle = ' Insert highlight code ';
Fcklang.codedlgname = ' language ';
Fcklang.codeerrnoname = ' Please enter code ';

Step Fourth: Create "Fckplugin.js" in "Highlighter\", as follows--this file content can also refer to files of the same name under other plugins directories.

Copy Code code as follows:

Register the related commands.
Fckcommands.registercommand (' highlighter ', New Fckdialogcommand ("highlighter", Fcklang.dlghighlightertitle, fckconfig.plugins.items[' highlighter ']. Path + ' highlighter.html ', 540, 540);
Fckcommands.registercommand (' highlighter ', New Fckdialogcommand ("highlighter", fcklang[' Codedlgtitle '), Fckconfig.pluginspath + ' highlighter/highlighter.html ', 540, 500));
Create the "Highlighter" toolbar button.
var ohighlighteritem = new Fcktoolbarbutton (' highlighter ', fcklang[' codebtn ');
Ohighlighteritem.iconpath = Fckconfig.pluginspath + ' highlighter/highlighter.gif ';
Fcktoolbaritems.registeritem (' highlighter ', ohighlighteritem);//' highlighter ' is the name of used in the Toolbar config.
var fckhighlighter = new Object ();
var Css_path = Fckconfig.pluginspath + "HIGHLIGHTER/DP." Syntaxhighlighter/styles/";
var pool = {"Firstcss": true};
Fckhighlighter.add = function (value) {
var odiv = FCK. createelement ("div");
Odiv._fckhighlighter = "Hldiv" + math.random ();
Odiv.classname= "Dp-highlighter";
odiv.innerhtml = value;
if (POOL.FIRSTCSS) {
Pool.firstcss = false;
odiv.innerhtml + + "<link href=" "+ Css_path +" syntaxhighlighter.css "href=" "+ Css_path +" Syntaxhighlighter.css "" + "Type= ' text/css ' rel= ' stylesheet ' ></link>";
}
alert (odiv.innerhtml);
}
Fckhighlighter.ondoubleclick = function (div) {
if (Div._fckhighlighter = "Hldiv") Fckcommands.getcommand (' highlighter '). Execute ();
if (Div.classname = = "Dp-highlighter" && div.tagname== "div") fckcommands.getcommand (' highlighter '). Execute ();
}
FCK. Registerdoubleclickhandler (Fckhighlighter.ondoubleclick, ' DIV ');

Fifth step: Find a 21x21px gif picture as a button, named "Highlighter.gif".

Sixth step: The key step, create the Insert Code dialog box, named "Highlighter.html". The contents are as follows--

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<meta http-equiv= "Pragma" content= "No-cache"/>
<meta http-equiv= "Cache-control" content= "No-cache, must-revalidate"/>
<meta http-equiv= "Expires" content= "Wed, Feb 1997, 08:21:57 GMT"/>
<meta http-equiv= "Expires" content= "0"/>
<script type= "Text/javascript" src= "DP". Syntaxhighlighter/scripts/shcore.js "Src=" DP. Syntaxhighlighter/scripts/shcore.js "></script>
<script type= "Text/javascript" src= "DP". Syntaxhighlighter/scripts/shbrushcsharp.js "Src=" DP. Syntaxhighlighter/scripts/shbrushcsharp.js "></script>
<script type= "Text/javascript" src= "DP". Syntaxhighlighter/scripts/shbrushphp.js "Src=" DP. Syntaxhighlighter/scripts/shbrushphp.js "></script>
<script type= "Text/javascript" src= "DP". Syntaxhighlighter/scripts/shbrushjscript.js "Src=" DP. Syntaxhighlighter/scripts/shbrushjscript.js "></script>
<script type= "Text/javascript" src= "DP". Syntaxhighlighter/scripts/shbrushjava.js "Src=" DP. Syntaxhighlighter/scripts/shbrushjava.js "></script>
<script type= "Text/javascript" src= "DP". Syntaxhighlighter/scripts/shbrushvb.js "Src=" DP. Syntaxhighlighter/scripts/shbrushvb.js "></script>
<script type= "Text/javascript" src= "DP". Syntaxhighlighter/scripts/shbrushsql.js "Src=" DP. Syntaxhighlighter/scripts/shbrushsql.js "></script>
<script type= "Text/javascript" src= "DP". Syntaxhighlighter/scripts/shbrushxml.js "Src=" DP. Syntaxhighlighter/scripts/shbrushxml.js "></script>
<script type= "Text/javascript" src= "DP". Syntaxhighlighter/scripts/shbrushdelphi.js "Src=" DP. Syntaxhighlighter/scripts/shbrushdelphi.js "></script>
<script type= "Text/javascript" src= "DP". Syntaxhighlighter/scripts/shbrushpython.js "Src=" DP. Syntaxhighlighter/scripts/shbrushpython.js "></script>
<script type= "Text/javascript" src= "DP". Syntaxhighlighter/scripts/shbrushruby.js "Src=" DP. Syntaxhighlighter/scripts/shbrushruby.js "></script>
<script type= "Text/javascript" src= "DP". Syntaxhighlighter/scripts/shbrushcss.js "Src=" DP. Syntaxhighlighter/scripts/shbrushcss.js "></script>
<script type= "Text/javascript" src= "DP". Syntaxhighlighter/scripts/shbrushcpp.js "Src=" DP. Syntaxhighlighter/scripts/shbrushcpp.js "></script>
<title> Insert Code </title>
<script language= "javascript" type= "Text/javascript" ><!--
var oeditor = window.parent.InnerDialogLoaded ();
var Fcklang = Oeditor.fcklang;
var fckhighlighter = Oeditor.fckhighlighter;
Window.onload = function () {
OEditor.FCKLanguageManager.TranslatePage (document);
Window.parent.SetOkButton (TRUE);
Loadselected ();
document.getElementById ("code"). focus ();
}
function Ok ()
{
if (document.getElementById ("code"). Value.length==0)
{
Alert (fcklang[' codeerrnoname '));
return false;
}
Dp. syntaxhighlighter.clipboardswf = ' DP. Syntaxhighlighter/scripts/clipboard.swf ';
var result=dp. Syntaxhighlighter.highlightall (' Code ', 0,1,0,1,0);

var str = "";
For (key in result)
{
str = result[key][0];
}
Fckhighlighter.add (str);
return true;
}
var eselected = oEditor.FCKSelection.GetSelectedElement ();
function loadselected ()
{
if (!eselected) {return;}
if (Eselected.tagname = = ' DIV ' && eselected.classname== "Dp-highlighter")
{
var ol = ESelected.document.getElementsByTagName ("ol"); Firefox prompts for an error here
var CodeClass = ol[0].classname.substring (3,ol[0].classname.length);
var ddlv= ';
Switch (CodeClass) {
Case "CPP":
document.getElementById ("code"). Classname= "CPP";
ddlv= "CPP";
Break
Case "C"://c#,javascript PHP does not understand why these three languages CSS names are dp-c, so can not distinguish
document.getElementById ("code"). Classname= "CSharp";
ddlv= "C #";
Break
Case "CSS":
document.getElementById ("code"). Classname= "CSS";
ddlv= "CSS";
Break
Case "Delphi":
document.getElementById ("code"). Classname= "Delphi";
Ddlv= "Delphi";
Break
Case "J":
document.getElementById ("code"). Classname= "Java";
Ddlv= "Java";
Break
Case "PY":
document.getElementById ("code"). Classname= "Python";
ddlv= "Python";
Break
Case "RB":
document.getElementById ("code"). Classname= "Ruby";
ddlv= "Ruby";
Break
Case "SQL":
document.getElementById ("code"). classname= "SQL";
ddlv= "SQL";
Break
Case "VB":
document.getElementById ("code"). Classname= "VB";
Ddlv= "VB";
Break
Case "XML":
document.getElementById ("code"). Classname= "XML";
ddlv= "XML";
Break
}
var codetypenum = document.getElementById ("CodeType"). Options.length;
for (Var i=0;i<codetypenum;i++)
{
if (document.getElementById ("CodeType"). Options[i].value = = DDLV)
{
document.getElementById ("CodeType"). Options[i].selected = true;
}
}
var codecontent = ESelected.nextSibling.innerHTML;
document.getElementById (' Code '). Value = Codecontent.replace ("<", "<");
document.getElementById (' Code '). Value = Codecontent.replace (/<[^>]+>/g, "");

if (Navigator.userAgent.indexOf ("MSIE") >0) {
document.getElementById (' Code '). Value = Ol[0].innertext;
}else{
document.getElementById (' Code '). Value = Ol[0].textcontent;
}
}
else eselected = null;
}
--></script>
<body>
<table style= "width:100%;" >
<tr>
&LT;TD style= "width:10%; line-height:25px; " ><span fcklang= "Codedlgname" ></span></td>
<td>
<select id= "CodeType" style= "width:250px" onchange= "document.getElementById" (' Code ') ClassName =this.value; " >
<option value= "CSharp" >C#</option>
<option value= "PHP" >PHP</option>
<option value= "JavaScript" >Javascript</option>
<option value= "xml" >Xml</option>
<option value= "xml" >Html</option>
<option value= "CSS" >Css</option>
<option value= "CPP" >C/C++</option>
<option value= "Delphi" >Delphi</option>
<option value= "Java" >Java</option>
<option value= "Python" >Python</option>
<option value= "Ruby" >Ruby</option>
<option value= "SQL" >Sql</option>
<option value= "VB" >VB</option>
</select>
</td>
</tr>
<tr>
<td><span fcklang= "Codearea" ></span></td>
<td>
<textarea rows= "cols=" class= "CSharp" name= "code" id= "code" >

The final directory structure is as follows:

Step Seventh: Locate the "fckconfig.js" file. (This is FCKeditor's core configuration file, should be able to find ...) Find the "Fckconfig.toolbarsets" key and add "highlighter" in it. For example:

Copy Code code as follows:

fckconfig.toolbarsets["Basic"] = [
[' Style ', ' Fontformat ', ' fontname ', ' fontsize ', '-', ' Bold ', ' Italic ', '-', ' textcolor ', ' bgcolor ', '-', ' highlighter ']

Eighth step: or in "Fckconfig.js", find "fckconfig.plugins" This key, add the following code:

Copy Code code as follows:

FCKCONFIG.PLUGINS.ADD (' highlighter ', ' zh-cn ');

OK, the Syntaxhighlighter code highlighted in the form of a FCKeditor plug-in is complete.

The final effect is as shown:

-->