FCK2.6添加插件SyntaxHighlighter 2

一、下载插件包

1. for fck:FCKEditor-syntaxhighlight_2.1.0.zip

2. html渲染:syntaxhighlighter_2.1.364.zip

 

二、FCKEditor-syntaxhighlight配置

1.FCKEditor-syntaxhighlight_2.1.0.zip解压,放置位置如下图,fckeditor\editor\plugins\syntaxhighlight2

   “syntaxhighlight2”名称不要改动

FCK2.6添加插件SyntaxHighlighter 2

 

2.在配置文件“fckconfig.js” 或者 “自定义的.js”加入

 

注册插件

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

 

配置工具栏(在合适的位置加入SyntaxHighLight2)

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

 

打开插件时,默认语法

FCKConfig.SyntaxHighlight2LangDefault = 'java' ;

 

 

编程语言对应的语法参数:

  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

 

 

在fck_editorarea.css中加入:

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

 

调用:

在工具栏上点

 

 

三、前台展示html时的渲染配置

1.引入必须要的文件

<link rel="stylesheet" href="../../plugins/syntaxhighlighter2/styles/shCore.css" />
<script src="../../plugins/syntaxhighlighter2/scripts/shCore.js"></script>

<!-- 默认的高亮主题 -->
<link rel="stylesheet" href="../../plugins/syntaxhighlighter2/styles/shThemeDefault.css" />

<!-- 需要高亮显示的语言对应的js -->
<script src="../../plugins/syntaxhighlighter2/scripts/shBrushJava.js"></script>

 

2.调用

<script type="text/javascript">
  SyntaxHighlighter.config.clipboardSwf = '../../plugins/syntaxhighlighter2/scripts/clipboard.swf';
  SyntaxHighlighter.config.strings = {
            expandSource : '展开代码',
            viewSource : '查看代码',
            copyToClipboard : '复制代码',
            copyToClipboardConfirmation : '复制成功',
            print : '打印',
            alert: ''
        };
  SyntaxHighlighter.all()
</script>

 

参考:

http://psykoptic.com/blog/post/2008/12/01/Code-Syntax-Highlight-Plugin-for-FCKeditor.aspx

http://www.cnblogs.com/meiqunfeng/archive/2009/11/24/1609238.html

你可能感兴趣的:(highlighter)