Integration of FCKeditor and Syntaxhighlighter code highlighting plug-ins _ Web editor

Introduction (Introduction)

This is a dialog-based plugin to handle formatting of the source code for FCKeditor 2.5.x. It WON ' T work with the new CKEditor (yet). (CKEditor is an upgraded version of FCKeditor, butSyntaxhighlighter cannot implement code highlighting in CKEditor ) I T makes use of the Syntaxhighlighter 2.0.x javascript library available to download from Alex Gorbatchev ' s PROJEC T page (the older version 1.5.1 version is available from Google Code).

The plugin primiarily edits a <pre> tag with some custom attributes. Its mainly aimed at users editing blogs or content management systems where there are a requirement to format programming L Anguages on a website this is being edited using FCKEditor.

The plugin won't format the code in FCKEditor -the Syntaxhighlighter JavaScript library dynamically generates A lot of formatted HTML at runtime, which would cause problems in FCKEditor.

Skip straight to the good bits

Can ' t be bothered reading all this? View the online demo or download the plugin with it yourself.

So what does I get then?

Correctly installed, the plugin is in the form of a tabbed dialogue box that looks like this: (plug-in installed after the effect)

Version history: (Versions history)

Huge goes to Sergey Gurevich who wrote the updated code for the FCKEditor plugin to handle the latest Ion of the Syntaxhighlighter code and submitted useful bug fixes.

• v2.1.0 [2009]
  -Plugin version information now being displayed
  -line Highlightin G feature added
  Download | Demo
   
• v2.0.1 [March 2009]
  Minor bug fix where semi-colons were sometimes positi OneD in the wrong where no advanced options were selected
  Download
   
• v2.0 [2 M Arch 2009]
  Latest version supporting Syntaxhighlighter 2.0.x
   
• v1.0.2 [2 March 200 9]
  Bug fixes, final release supporting the older Syntaxhighlighter 1.5.1
  Note the instructions below for the new Er version of the library and makes references to syntaxhighlight2 a lot, this version uses syntaxhighlight . The documentation in the download is more accurate.
  Download.| Demo
   
• v1.0.1 [Feb 2009].
   
• v1.0 [Nov 2008]. The version of the.

Known Bugs:

Occasionally the dialogue box does not pickup the "<pre> element to is edited in Firefox." It only seems to happen when a user clicks inside the <pre> tag with the mouse but ' t doesn move or actually Ract with the cursor.
Fixed in version 1.0.2-thanks to Sergey Gurevich

Installation (Installation configuration process)

1. Copying the files (copy file)

Extract the contents of the zip in your plugins directory, so it ends up like this: (Basic directory structure is as follows)

Note: Version 2 of the plugin must is extracted to a directory named 'syntaxhighlighter2'. The older plugin for the earlier version of the library must go in a folder named 'syntaxhighlighter'. The file fckplugin.js references this directory when the plugin initialises. (Note the name here)

2. Adding it to FCKeditor (add it to FCKeditor)

Now add in your fckconfig.js or custom JS configuration file The following line (remember its javascript We are dealing with so everything are case sensitive!):

1. FCKConfig.Plugins.Add( 'syntaxhighlight2' , 'en' ) ;

3. Adding it to the ToolbarSet

Add the button ' SyntaxHighLight2 ' button to your toolbarset:

1. FCKConfig.ToolbarSets[ "Basic" ] = [

2. [ ' Bold ' ' italic ' '-' ' orderedlist ' ' unorderedlist ' '-' ' Link ' ' Unlink ' '-' ' SyntaxHighLight2 ' '-' ' about '

3. ] ;

4. Configure the Plugin

The plugin would work ' out of the box ', but can configure a default language using the syntaxhighlight2langdefault< /c4> parameter:

1. FCKConfig.SyntaxHighlight2LangDefault = 'csharp' ;

The full list of languages and corresponding codes are:

• • C + +-C + +
  • CSharp -C #
  • CSS -css
  • Delphi -Delphi
  • Java -java
  • JScript -Java Script
  • PHP -php
  • python -python
  • Ruby -Ruby
  • SQL -SQL
  • vb -vb.net
  • XHTML -xml/html

In FCKEditor <pre> blocks aren ' t really formatted by default. I suggest editing your fck_editorarea.css (or equivalant If you are are using a custom CSS file) to something Highlights code blocks better. eg

01. pre

02. {

03.      background-color : #fff ;

font-family "Consolas" "Courier New" Courier mono serif

05.      font-size : 12px ;

06.      color : blue ;

07.      padding : 5px ;

08.      border : 1px dashed blue ;

09. }

Configuring Syntaxhighlighter.

You are must have Syntaxhighlighter installed and working to display properly code. FCKEditor does not need it, but for code to is properly formatted on your website you must have it configurated correctly. For SyntaxHighlighter2 Alex Gorbatchev's site has loads of excellent information (he wrote it over all!) for the "Old ve Rsion 1.5.1 Library, the project Wiki here is a good resouce, or this blog post might also be useful.

5. Use it

Now clear your browser cache (this stage are important!) and reload the editor, the new button should be ready to Use.

6. Future Updates

There ' s Some additional functionality I might add at a later date:

• Preview tab using the Syntaxhighlighter library
• More configuration options, eg, available languages, path to syntaxhighlighter files
• Dynamically adding a <pre> formatting style to the editor by default

7. And finally ...

Goes to Alex Gorbatchev for creating Syntax highlighter!.

Cloud-dwelling Community package download Address:
/201004/yuanma/fckeditor-syntaxhighlight.rar