一、下载插件包
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”名称不要改动
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