FCKEditor下SyntaxHighlighter代码加亮插件的安装方式

Tips: 斜体是翻译内容

Introduction
简介

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:

正确安装后,该插件在表单中以一个Tab对话框形式显示,样子看起来如下:

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修复,在高级选项没有选择的时候,分号有时候会位置定位错误
    Download  
· 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:

已知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。

Installation

安装

1. Copying the files

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

将zip文件解压到你的插件目录下,完成后看起来如下:

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必须解压到名为'syntaxhighlighter2'的目录下面。针对库更早的版本的老插件版本需要放入名为'syntaxhighlighter'的文件夹下。当该插件初始化的时候,文件fckplugn.js需要引用咋个文件夹。


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.js货custom.js配置文件中(切记我们正在处理的javascript所有一切都是大小写敏感的!):

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

3. Adding it to the toolbarset

3. 添加到toolbarset
Add the button 'SyntaxHighLight2' button to your toolbarset:
将'SyntaxHighLight2'按钮添加到你的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:
现在插件将可以以'开箱即用'的运行了,但你也可以设置通过SyntaxHighlight2LangDefault参数来设置默认的语言:

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文件)来更好的高亮显示代码块。比如:

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


Configuring SyntaxHighlighter.

配置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 5 and 6 and type the answer here:

关于博主

  一枚成分复杂的网络IT分子,属于互联网行业分类中的杂牌军。