插件FCKeditor 和 SyntaxHighlighter 代码高亮插件的整合

http://taskcn.blog. 163.com/

FCKeditor和SyntaxHighlighter代码高亮插件的整合页面导航 →→→正文内容FCKeditor SyntaxHighlighter代码高亮插件FCKeditor和SyntaxHighlighter代码高亮插件的整合

FCKeditor和SyntaxHighlighter代码高亮插件的整合方法里面有下载可以根据需要结合自己的fckeditor版本。

Introduction 简介

This is a dialog-based plugin to handle formatting of source codefor . It WON'T work with the new (yet) . CKEditor是FCKEditor的升级版不过 SyntaxHighlighter还不能在CKEditor中实现代码高亮 Itmakes use of the SyntaxHighlighter 2.0.x javascript library availableto download from project page (the older version 1.5. 1 version isavailable from ) .

The plugin primiarily edits a pre tag with some custom attributes.Its mainly aimed at users editing blogs or content management systemswhere there is a requirement to format programming languages on awebsite that is being edited using FCKEditor.

The plugin will not format the code in FCKEditor - the

SyntaxHighlighter javascript library dynamically generates a lot offormatted HTML at runtime, which would cause problems in FCKEditor.Skip straight to the good bits

Can' t be bothered reading all this? or and go play with it yourself.So what do I get then?

Correctly installed, the plugin is in the form of a tabbed dialoguebox that looks like this: 插件安装好以后的效果http://taskcn.blog. 163.com/

http://taskcn.blog. 163.com/

Version history: 版本历史

Huge thanks goes to Sergey Gurevich who wrote the updated code forthe FCKEditor plugin to handle the latest version of the

SyntaxHighlighter code and submitted useful bug fixes.v2. 1.0 [23 May 2009]

- Plugin version information now being displayed

- Line highlighting feature added

|v2.0. 1 [22 March 2009]

Minor bug fix where semi-colons were sometimes positioned in thewrong place when no advanced options were selectedv2.0 [2 March 2009]

Latest version supporting SyntaxHighlighter 2.0.xv1.0.2 [2 March 2009]

Bug fixes, final release supporting the older SyntaxHighlighter 1.5. 1Note the instructions below are for the newer version of the libraryand makes references to syntaxhighlight2 a lot, this version useshttp://taskcn.blog. 163.com/

http://taskcn.blog. 163.com/

syntaxhighlight. The documentation in the download will be moreaccurate.

. |v1.0. 1 [10 Feb 2009] .v1.0 [30 Nov 2008] . First version. Known bugs:

Occasionally the dialogue box does not pickup the pre element to beedited in Firefox. It only seems to happen when a user clicks insidethe pre tag with the mouse but doesn' t actually move or interact withthe cursor.

Fixed in version 1.0.2 - Thanks to Sergey Gurevich

Installation 安装配置过程 1. Copying the files 拷贝文件

Extract the contents of the zip in your plugins directory, so it endsup like this: 基本的目录结构如下

Note: Version 2 of the plugin must be extracted to a directory named' syntaxhighlighter2' . The older plugin for the earlier version of thelibrary must go in a folder named ' syntaxhighlighter' . The filefckplugin. js references this directory when the plugin initialises.

注意这里的命名

2. Adding it to FCKeditor 将它添加到FCKeditorhttp://taskcn.blog. 163.com/

http://taskcn.blog. 163.com/

Now add in your fckconfig. js or custom js configuration file thefollowing line (remember its javascript we are dealing with soeverything is case sensitive!) :

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 pluginThe plugin will work 'out of the box' , but you can configure adefault language using the SyntaxHighlight2LangDefault parameter:

1.FCKConf ig.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 suggestediting your fck_editorarea.css (or equivalant if you are using acustom CSS file) to something that highlights code blocks better. eg:

03. background-color: #fff; 04. font-family: "Consolas" , "CourierNew" ,Courier,mono, serif; 05. font-size: 12px; 06. color: blue;

07. padding: 5px; 08. border: 1px dashed blue; Configuring

SyntaxHighlighter.

You must have SyntaxHighlighter installed and working to displayproperly formatted code. FCKEditor does not need it, but for code tobe properly formatted on your website you must have it configuratedcorrectly. For SyntaxHighlighter2 has loads of excellent information(he wrote it after all!) , for the old version 1.5. 1 library, the is agood resouce, or post might also be useful.

5. Use ithttp://taskcn.blog. 163.com/

http://taskcn.blog. 163.com/

6. Future updates

There' s some additional functionality I might add at a later date:Preview tab using the SyntaxHighlighter library More configurationoptions, eg, available languages, path to SyntaxHighlighter filesDynamically adding a pre formatting style to the editor by default 7.And finally. . .

Thanks goes to Alex Gorbatchev for creating ! .

脚本之家打包下载地址http://taskcn.blog. 163.com/