FCKeditor是如今更为时兴的开源系统编辑器,SyntaxHighlighter是一个用JS完成的代码高亮显示软件,能够降到最低修改您的程序代码实际效果,最后实际效果截屏:

FCKeditor + SyntaxHighlighter 让代码高亮着色插件 代码高亮 SyntaxHighlighter FCKeditor 网页编辑器  第1张

演试网页页面

免费下载FCKeditor SyntaxHighlighter插件包:fck_SyntaxHighlighter装包版

下边逐层详细介绍怎样在FCKeditor自然环境中应用SyntaxHighlighter。

后台管理FCKeditor编辑器的修改

1、将包缓解压力后,把 insertcode 文件夹上传入 FCKeditor编辑器的editor\plugins\文件目录下,随后修改FCKeditor编辑器的fckconfig.js此文档,在这里文档中 FCKConfig.PluginsPath = FCKConfig.BasePath 'plugins/' ;下边添加下列代码:
FCKConfig.Plugins.Add('insertcode');

 2、开启FCKeditor编辑器的editor\lang文件夹里的zh-cn.js,在DlgDivInlineStyle : "CSS 款式",(留意这句话后边一定要加一个分号“,”)下边添加下列代码
//Plugins
InsertCodeBtn : "插入代码"

 3、修改FCKeditor编辑器的fckconfig.js文件,在编辑器操作面板中添加按键,在启用菜单栏主要参数的Media后边添加insertcode(留意恰当再加上标点,不然会出错)。以下所显示:
FCKConfig.**Sets[ "standard"] = [
['Source','Paste','PasteText','PasteWord','-','Undo','Redo','-','Bold','Italic','Underline','StrikeThrough','TextColor','Table','-','JustifyLeft','JustifyCenter','JustifyRight','OrderedList','UnorderedList','-','Image','Attach','Flash','Media','InsertCode'],进行之上实际操作后,这时起动FCKeditor编辑器应当在编辑器的**上多了一个标志,点一下此标志就可以加上你的代码了。假如出错,提醒找不着专用工具项,那就是FCKeditor的缓存文件没消除,撤出后台管理或升级缓存文件,更新一下,再次进到就可以见到代码插入标志了。

前台接待显示信息网页页面的SyntaxHighlighter启用

1、将包缓解压力后把 syntax 文件夹上传入前台接待根目录下的js文件夹中。

2、在必须开展高亮显示解决的HTML网页页面中提升SyntaxHighlighter操纵代码,将以下代码,插入到HTML网页页面的<header>与</header>中间:

<script type="text/javascript" src="/js/syntax/scripts/shCore.js"></script>
<script type="text/javascript" src="/js/syntax/scripts/shLegacy.js"></script> 
<script type="text/javascript" src="/js/syntax/scripts/shBrushAll.js"></script>
<link href="/js/syntax/styles/shCore.css" type="text/css" rel="stylesheet"/>
<link href="/js/syntax/styles/shThemeDefault.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = '/js/syntax/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

<font face="Courier New" style="background-color: #f8f8f8">2、在前台接待页的CSS文档中提升以下款式操纵CSS代码(这一段还可以不用,仅仅为了更好地更美观大方):</font>

.codeHead {font-weight: bold;font-size: 12px;padding: 5px;padding-left: 15px;background: #fff;border-bottom: 1px solid #ddd;}
.codeText {border: 1px solid #ddd;width: 98%;overflow: auto;margin: 0 0 1.1em;padding: 0;word-break: break-all;background: #fff;font: 12px 'Courier New', Monospace;}
.codeText ol {list-style: decimal-leading-zero;margin: 0 1px 0 45px;padding: 5px 0;color: #4C4C4C;border-left: 1px solid #ddd;background: #fff;}
.codeText ol li {list-style-type:decimal;padding-left: 10px;background: #FFF;}
.codeText ol li.alt {background: #FFF;}
.codeText ol li span {color: #000;}

留意:那样的前台接待启用途径为 /js/syntax/ 是由于我上传入了这一途径,此途径依据你的必须可修改。应是你事实上传的途径。

到此修改所有完毕,假如你一直在修改中碰到什么问题,热烈欢迎与大家沟通交流,tech#cncms.com

填补:有盆友体现载入时网页页面变卡一下才可以显示信息完,缘故是在页面加载时JS即运行,开展代码的上色,解决方案便是,让代码上色 SyntaxHighlighter.all(); 廷时实行就可以,大家把上边的代码稍改一下:

<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = '/js/syntax/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

改成:

<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = '/js/syntax/scripts/clipboard.swf';
setTimeout("SyntaxHighlighter.all();",300);
</script>

那样改后,就觉得不上载入时的信用卡。