FCKEditor SyntaxHighlighter整合实现代码高亮显示

近期，我制作了一个小网站，其中用到了代码高亮嵌入显示功能。为了提升用户体验，我决定尝试将FCKeditor和dp.SyntaxHighlighter结合起来。

在这一功能的路上，我查阅了大量的资料，但发现并没有太多关于如何将两者完美结合的具体指导。于是，我决定自己动手，尝试整合这两个工具，并分享我的经验。

为了方便大家使用，我所在的团队狼蚁SEO特地提供了两个已经整合好的插件版本。接下来，我将简要介绍一下安装步骤，希望对以后开发其他FCKeditor插件有所帮助。

你需要在FCKeditor的路径中找到“editor\plugins\”文件夹，并在其中创建一个名为“highlighter”的新文件夹。

然后，将“dp.SyntaxHighlighter\Scripts”文件夹及其所有内容（包括所有的js文件和flash文件）复制到“highlighter”文件夹中。

接下来，在“highlighter”文件夹下创建“lang”子文件夹，并在其中新建一个名为“zh-.js”的文件。该文件的内容应如下：

```css

FCKLang.CodeArea = '代码';

FCKLang.CodeDlgName = '语言';

FCKLang.CodeErrNoName = '请输入代码';

```

在“highlighter”文件夹下创建“fckplugin.js”文件，你可以参考其他plugins目录下的同名文件来填写内容。

紧接着，我们创建一个名为 "HighLighter" 的工具栏按钮。这个按钮与之前的命令相关联，图标指向 "highlighter.gif"，确保这个图标文件的尺寸为21×21像素。这个按钮的存在是为了让用户更方便地访问和使用代码高亮功能。

接下来，我们定义了一个名为 "FCKHighLighter" 的对象，用于处理代码高亮相关的操作。我们设定了CSS的路径，并创建了一个对象池来管理资源。特别是首次加载时，我们会加载一个CSS样式文件，用于美化代码高亮显示。

FCKHighLighter对象的功能：

最后一步是注册双击事件处理器。当用户双击一个div元素时，将触发FCKHighLighter.OnDoubleClick事件处理器，进而执行相应的代码高亮命令。这意味着用户可以轻松地双击他们想要高亮的代码块来启动高亮功能。这为开发者提供了一个便捷的工具，使代码展示更加清晰和易于理解。

代码展示与编辑

我们看到头部信息中包含了多个脚本引用，这些脚本主要用于提供代码高亮功能，支持的编程语言包括C、PHP、JavaScript、XML、HTML、CSS、C/C++、Delphi、Java、Python、Ruby和SQL等。

当用户在编辑器中选择一段代码并想要高亮显示时，会触发一系列的事件处理函数。它会获取选中的元素，然后根据元素的类名确定代码的类别。之后，它会根据代码类别设置文本区域的类名，并自动完成代码的高亮显示。这个过程充分考虑了不同浏览器的兼容性问题。

最终目录结构中，“fckconfig.js”文件是核心的配置文件。这个文件包含了代码编辑器的主要配置信息，如语言管理、高亮设置等。通过配置这个文件，开发者可以定制代码编辑器的行为，以满足不同的需求。

关于FCKEditor插件配置的小攻略：让SyntaxHighlighter代码实现高亮显示

你是否曾在寻找FCKEditor的核心配置文件而苦恼？没错，那份关键的文档就在你的眼前，那就是FCKConfig文件。在这个文件中，有一个名为“FCKConfig.ToolbarSets”的关键项，我们需要在这里找到它并加入一个新的元素“‘HighLighter’”。具体操作如下：

打开你的fckconfig.js文件，找到这个关键项的配置部分。假设你要在“Basic”工具条集合中加入新的元素，你可以像下面这样修改配置：

代码如下：

FCKConfig.ToolbarSets["Basic"] = [

['Style','FontFormat','FontName','FontSize','-','Bold','Italic','-','TextColor','BGColor','-','HighLighter']

这样，“HighLighter”就成功添加到了你的工具条中。

接下来，我们还需要进行另一个关键步骤。还是在同一个fckconfig.js文件中，我们需要找到另一个关键项“FCKConfig.Plugins”。在这个项中，我们需要添加一个新的插件：“highlighter”，使其支持代码高亮显示。具体代码如下：

代码如下：

FCKConfig.Plugins.Add('highlighter','zh-') ;

完成以上步骤后，你的FCKEditor插件就已经具备了SyntaxHighlighter代码高亮显示的功能。现在你可以轻松地在编辑器中展示你的代码，并且让你的读者以更加清晰、直观的方式查看和理解你的代码。

最终的效果如何呢？就像你看到的那张图一样，代码高亮显示，使得你的文章更加生动、吸引人。

别忘了执行这句代码：cambrian.render('body')。这将启动你的应用程序，让你的改动生效。这就是今天的分享，希望对你有所帮助！