Tips: 斜体是翻译内容


This is a dialog-based plugin to handle formatting of source code for FCKeditor 2.5.x. It WON'T work with the new CKEditor (yet).(CKEditor 是FCKEditor 的升级版,不过,SyntaxHighlighter 还不能在 CKEditor 中实现代码高亮) It makes use of the SyntaxHighlighter 2.0.x javascript library available to download from Alex Gorbatchev's project page (the older version 1.5.1 version is available from Google Code).

这是一个基于对话框的方式来处理源代码格式的FCKeditor 2.5.x的插件。当前版本还不能在新版的CKEditor中运行(译注:CKEditor是FCKEditor的设计版本)。它使用SyntaxHighlighter 2.0.x的js库,该库可以从Alex Gorbatcherv的项目页面中下载到
(更老的版本1.5.1版可以从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 is a requirement to format programming languages on a website that is being edited using FCKEditor.
The plugin will not format the code in FCKEditor - the SyntaxHighlighter javascript library dynamically generates a lot of formatted HTML at runtime, which would cause problems in FCKEditor.

这个插件主要就是编辑<pre>的一些自定义属性。它主要目标在于用户编辑博客或CMS中那些通过FCKEditor编辑的并需要在网站上格式化各种编程语言的需求。该插件不会在FCKEditor中格式化代码-SyntaxHighlighter javascript库会在运行时生成大量的格式化HTML,这在FCKEditor中会引起很多问题。

Skip straight to the good bits.

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

看所有这些很麻烦? 查看在线的Demo或者下载该插件然后自己慢慢研究吧。

So what do I get then?

Correctly installed, the plugin is in the form of a tabbed dialogue box that looks like this:


syntax highlighter plugin for fckeditor 2

Version history:

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

十分感谢Sergey Guirevich 为此FCKEditor插件提供更新来处理Syntaxhighlighter最新版本,并提交有效的bug修复。

· v2.1.0 [23 May 2009]
    - Plugin version information now being displayed(插件版本信息现在可以显示了

    - Line highlighting feature added(加入行高亮特性
    Download | Demo
· v2.0.1 [22 March 2009]
    - Minor bug fix where semi-colons were sometimes positioned in the wrong place when no advanced options were selected(小Bug修复,在高级选项没有选择的时候,分号有时候会位置定位错误
· v2.0 [2 March 2009]
    - Latest version supporting SyntaxHighlighter 2.0.x (最新版本支持SyntaxHighlighter 2.0 x
· v1.0.2 [2 March 2009]
    - Bug fixes, final release supporting the older SyntaxHighlighter 1.5.1 (错误修复,最终版支持更老的SyntaxHighlighter 1.5.1版本
    - Note the instructions below are for the newer version of the library and makes references to syntaxhighlight2 a lot, this version uses syntaxhighlight. The documentation in the download will be more accurate.(注意下面的说明是针对更新版本的苦并且引用了很多SyntaxHighlight2,当前版本使用的是Syntaxhighlight。下载中的文档将会有更详细的说明。
    Download| Demo
· 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 be edited in Firefox. It only seems to happen when a user clicks inside the <pre> tag with the mouse but doesn't actually move or interact with the cursor.
    Fixed in version 1.0.2 - Thanks to Sergey Gurevich

    在1.0.2版本中修复 - 感谢Sergey Gurevich。



1. Copying the files

1. 拷贝文件
Extract the contents of the zip in your plugins directory, so it ends up like this:


syntax highlighter plugin for fckeditor setup

Note: Version 2 of the plugin must be 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.


2. Adding it to FCKeditor

2. 将它添加到 FCKeditor
Now add in your fckconfig.js or custom js configuration file the following line (remember its javascript we are dealing with so everything is case sensitive!):

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

3. Adding it to the toolbarset

3. 添加到toolbarset
Add the button 'SyntaxHighLight2' button to your toolbarset:

FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink', '-','SyntaxHighLight2','-','About']
] ;

4. Configure the plugin

4. 配置插件
The plugin will work 'out of the box', but you can configure a default language using the SyntaxHighlight2LangDefault parameter:

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 using a custom CSS file) to something that highlights code blocks better. eg:
在FCKEditor <pre>块默认将不会被真的格式化。我建议编辑你的fck_editorarea.css(或等价的css文件,如果你使用了自定义的CSS文件)来更好的高亮显示代码块。比如:

    background-color: #fff;
    font-family: "Consolas" , "Courier New" ,Courier,mono,serif;
    font-size: 12px;
    color: blue;
    padding: 5px;
    border: 1px dashed blue;

Configuring SyntaxHighlighter.

You must have SyntaxHighlighter installed and working to display properly formatted code. FCKEditor does not need it, but for code to be 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 after all!), for the old version 1.5.1 library, the project wiki here is a good resouce, or this blog post might also be useful.

你需要安装SyntaxHighlighter并能正常的显示格式化后的代码。FCKEditor不需要他,但是为了能在你网站上正确的格式化代码,你必须将它配置正确。Aex Gorbatchev's 我那个站有关于SyntaxHighlighter2的非常棒的信息(最后他还是写了!),老版本1.5.1的库,这里的项目wiki是一个不错的资源,或者这个博客也许同样有用。

5. Use it(使用
Now clear your browser cache (this stage is important!) and reload the editor, the new button syntaxhighlighter plugin 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


· 预览Tab使用SyntaxHighlighter 库;

· 更多的配置选项,比如:可用的语言,SyntaxHighlighter文件路径;

· 默认动态添加<pre>格式样式到编辑器

7. And finally...(最后
Thanks goes to Alex Gorbatchev for creating Syntax Highlighter!.

感谢Alex Gorbatchev 创造了SyntaxHighlighter!

原始 URL: http://psykoptic.com/blog/post/2008/12/01/Code-Syntax-Highlight-Plugin-for-FCKeditor(该页面最近好像打不开=.=!)


Tuesday, July 31, 2012 | 其他技术 Javascript(s)


No comments posted yet.


Please add 1 and 4 and type the answer here: