Recently, SyntaxHighlighter is highlighted on many blogs and well-known IT websites, so I want to use this highlight feature on my own website. This site uses the fckeditor editor, I just want to combine this function with fck to realize the code highlight embedded display function, FCKeditor and dp. syntaxHighlighter is used in combination.
Therefore, I checked a lot of information online and did not say how to do it. I changed my own package and uploaded it. I have studied one of these integrated examples, which can be used to develop other FCKeditor plug-ins in the future.
Step 1: Find "editor \ plugins \" in the FCKeditor path and create the "highlighter" folder.
Step 2: copy the "dp. SyntaxHighlighter \ Scripts" folder to this folder, and copy all js files and a flash file.
Step 3: create the "lang" folder in "highlighter \" and create a new "zh-cn.js" file with the following content --
Copy to ClipboardReference: [www.bkjia.com]
FCKLang. CodeBtn = 'insert highlight Code ';
FCKLang. CodeArea = 'code ';
FCKLang. CodeDlgTitle = 'insert highlight Code ';
FCKLang. CodeDlgName = 'language ';
FCKLang. CodeErrNoName = 'Enter the code ';
Step 4: Create "fckplugin. js" in "highlighter \". The content of this file is as follows-you can also refer to files with the same name under other plugins directories.
Copy to ClipboardReference: [www.bkjia.com]
// 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 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 ');
Step 5: Find a 212.1621pxgif GIF image and click "“highlighter.gif ".
Step 6: Create an import Code dialog box named “highlighter.html ". The content is as follows --
Copy to ClipboardReference: [www.bkjia.com]
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "pragma" content = "no-cache"/>
<Meta http-equiv = "Cache-Control" content = "no-cache, must-revalidate"/>
<Meta http-equiv = "expires" content = "Wed, 26 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. fckemediagemanager. 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 );
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.doc ument. getElementsByTagName ("ol"); // an error occurs in Firefox.
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 the CSS names in these three languages are dp-c, so they cannot be distinguished
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>
</Head>
<Body>
<Table style = "width: 100%;">
<Tr>
<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 = "25" cols = "80" class = "csharp" name = "code" id = "code">
The final directory structure is as follows:
Step 7: Find the "fckconfig. js" file. (This is the core configuration file of fckeditor. You can find it ......) Find the key "FCKConfig. ToolbarSets" and add "'highlighter'" to it '". For example:
Copy to ClipboardReference: [www.bkjia.com] FCKConfig. ToolbarSets ["Basic"] = [
['Style', 'fontformat', 'fontname', 'fontsize', '-', 'bold ', 'italic', '-', 'textcolor ', 'bgcolor', '-', 'highlighter']
Step 8: locate the "fckconfig. Plugins" key in "FCKConfig. js" and add the following code:
Copy to ClipboardReference: [www.bkjia.com] FCKConfig. Plugins. Add ('highlighter', 'zh-cn ');
All right, the SyntaxHighlighter code highlighted in the form of FCKEditor plug-in is complete.
Final Effect
Fire supplement:
Many of my friends sent me a message asking me that they had modified the fck editor according to the above steps, but they still could not display the highlighted content in the article, this is because your article does not load JS and CSS related to SyntaxHighlighter. For example, your website often displays PHP code, download SyntaxHighlighter PHP to highlight CSS and JS and load it to your article page. Thanks for reading the Liehuo.net tutorial.
