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

2023年6月11日上午2:52 • JavaScript

下面是关于“FCKeditor 和 SyntaxHighlighter 代码高亮插件的整合”的详细攻略。

概述

首先我们要理解这两个插件是什么。FCKeditor是一个基于Web的WYSIWYG文本编辑器，可以方便地进行文本排版，支持多种格式，具有图形用户界面。而SyntaxHighlighter是一个代码高亮插件，可以让我们方便地将代码高亮显示，并可以自定义样式。当然，用FCKeditor编辑过的文章中，我们也希望代码也可以高亮显示。因此，将这两个插件整合起来就显得非常有必要了。

整合过程

整合过程分为三步：下载插件、修改配置文件、添加代码。

下载插件

首先需要下载FCKeditor和SyntaxHighlighter插件，这里提供官网地址：

FCKeditor：https://sourceforge.net/projects/fckeditor/files/fckeditor/
SyntaxHighlighter：https://github.com/syntaxhighlighter/syntaxhighlighter/releases

下载后将它们添加到项目中。

修改配置文件

在FCKeditor的config.js文件中添加如下代码，使之支持SyntaxHighlighter插件。

FCKConfig.FormatSource = false;
FCKConfig.ToolbarCanCollapse = true;
FCKConfig.ToolbarLocation = 'top';
FCKConfig.ToolbarItems = [
  'Source',
  'Maximize',
  'Bold','Italic','Underline','StrikeThrough',
  'TextColor','BGColor','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyFull',
  'NumberedList','BulletedList','-','Outdent','Indent','Blockquote',
  'Link','Unlink','Anchor','-','Image',
  'Table','Rule','Smiley',
  'SpecialChar',
  'SyntaxHighlighter',
  'FitWindow'
];
FCKConfig.Plugins.Add( 'syntaxhighlighter', 'en' );

添加代码

在要编辑的文章中添加代码，代码的格式为：

<pre class="brush:js">
  function addAction(){
    // 添加代码
  }
</pre>

其中，class="brush:js"用于指定要高亮显示的代码类型，这里以JavaScript代码为例。

示例说明

示例一

假设我们要编辑的文章中需要添加一个JavaScript函数action，这个函数的代码如下：

function action(){
  console.log('this is action');
}

我们可以在FCKeditor中编辑完整的文章，其中需要添加代码的地方使用如下格式：

<pre class="brush:js">
  function action(){
    console.log('this is action');
  }
</pre>

保存并发布文章，现在我们访问这篇文章，会看到代码已经高亮显示了。

示例二

假设我们需要在文章中添加一个HTML页面的代码，这个代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My html page</title>
  </head>
  <body>
    <h1>My html page</h1>
    <p>Hello world!</p>
  </body>
</html>

同样的，在FCKeditor中编辑完整文章，在需要添加代码的地方使用如下格式：

<pre class="brush:html">
  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title>My html page</title>
    </head>
    <body>
      <h1>My html page</h1>
      <p>Hello world!</p>
    </body>
  </html>
</pre>

保存并发布文章，现在我们访问这篇文章，HTML代码也已经高亮显示了。