FCKeditor + syntaxhighlighter Let code highlight coloring plugin _ page Editor

FCKeditor is now the most popular open source editor, Syntaxhighlighter is a JS implementation of the code highlighting Plug-ins, you can minimize the changes in your program to achieve the effect of the final screenshot:



Demo Web page:

Download FCKeditor + Syntaxhighlighter Plug-in package: FCK_SYNTAXHIGHLIGHTER Cloud Habitat Community packaged edition

The following step-by-step article describes how to use Syntaxhighlighter in a fckeditor environment.

changes to the background FCKeditor editor

1, after the package decompression, the insertcode folder uploaded to the FCKeditor Editor editor\plugins\ directory, and then modify the FCKeditor editor fckconfig.js this file, in this file Fckconfig.pluginspath = Fckconfig.basepath + ' plugins/'; add the following code below:
FCKConfig.Plugins.Add (' Insertcode ');

2, open the FCKeditor editor of the Editor\lang folder in the Zh-cn.js, Dlgdivinlinestyle: "CSS style", ( note this sentence must be followed by a comma ",") add the following code
Plugins
insertcodebtn: "Insert Code"

3, modify the Fckconfig.js file of the FCKeditor editor, add a button in the Editor Control Panel, add the Insertcode after the media that calls the toolbar parameters (note the correct plus punctuation, or it will be an error). As shown below:
fckconfig.**sets["standard"] = [
[' Source ', ' Paste ', ' pastetext ', ' Pasteword ', '-', ' Undo ', ' Redo ', '-', ' Bold ', ' italic ', ' underline ', ' strikethrough ', ' TextColor ', ' Table ', '-', ' justifyleft ', ' justifycenter ', ' justifyright ', ' orderedlist ', ' unorderedlist ', '-', ' Image ', ' Attach ', ' Flash ', ' Media ',' Insertcode ', when you're done, the startup FCKeditor editor should have an additional icon on the editor's * *, click on this icon to add your code. If the error, the hint cannot find the tool item, that is FCKeditor cache is not clear, exit the background or update the cache, refresh, re-enter the code can see the insertion icon.

Syntaxhighlighter call to foreground display page

1, the package will be extracted after the syntax folder uploaded to the front desk in the root directory JS folder.

2, in the need to highlight the processing of the HTML page to add Syntaxhighlighter control code, the following code, inserted into the HTML page

<script type= "Text/javascript" src= "/js/syntax/scripts/shcore.js" ></script>
<script type= "text /javascript "src="/js/syntax/scripts/shlegacy.js "></script> <script type=" Text/javascript "src=" 
/ Js/syntax/scripts/shbrushall.js "></script>
<link href="/js/syntax/styles/shcore.css "type=" text/ CSS "rel=" stylesheet "/> <link href="/js/syntax/styles/shthemedefault.css "type="
text/css "rel=" Stylesheet "/>
<script type= text/javascript" >
SyntaxHighlighter.config.clipboardSwf = '/js/ Syntax/scripts/clipboard.swf ';
Syntaxhighlighter.all ();
</script>

<font face= "Courier New" style= "Background-color: #f8f8f8" >2, the CSS file in the foreground page to add the following style control CSS code (this paragraph can not add, just for more beautiful): </ Font>

. codehead {font-weight:bold;font-size:12px;padding:5px;padding-left:15px;background: #fff; border-bottom:1px solid #ddd;}
.  Codetext {border:1px solid #ddd; width:98%;overflow:auto;margin:0 0 1.1em;padding:0;word-break:break-all;background: #fff; font:12px ' Courier New ', monospace;
Codetext ol {list-style:decimal-leading-zero;margin:0 1px 0 45px;padding:5px 0;color: #5C5C5C border-left:1px Solid #d Dd;background: #fff;
Codetext ol li {list-style-type:decimal;padding-left:10px;background: #FFF;}
. Codetext ol Li.alt {background: #FFF;}
. Codetext ol li span {color: #000;}

Note: Such a foreground call path is/js/syntax/because I have uploaded to this path and this path can be modified according to your needs. Should be the path you actually pass.

This change is all over, if you have any problems in the modification, welcome to communicate with us, tech#cncms.com

Add: A friend reflects load when the page will be able to display the card, the reason is that when the page is loaded JS started running, code coloring, the solution is to let code coloring Syntaxhighlighter.all (); Delay execution, we can change the above code a little bit:

<script type= "Text/javascript" >
SyntaxHighlighter.config.clipboardSwf = '/js/syntax/scripts/ Clipboard.swf ';
Syntaxhighlighter.all ();
</script>

To

<script type= "Text/javascript" >
SyntaxHighlighter.config.clipboardSwf = '/js/syntax/scripts/ Clipboard.swf ';
SetTimeout ("Syntaxhighlighter.all ();");
</script>

After this change, you will not feel the load of the card.