修改fckeditor的insertcode插件的显示效果

insertcode插件可以实现代码的高亮显示,使用非常方便,但是显示效果中代码行间距比较大,默认的li行距是比较大的.
可以作如下修改来实现比较紧凑的显示代码,在insertcode.css文件中找到如下代码:(大概是在77-90行)

.codeText ol {
list-style: decimal-leading-zero;
margin: 0 1px 0 45px;
padding: 2px 0;
color: #5C5C5C;
border-left: 1px solid #ddd;
background: #fff;
line-height:16px;
}
.codeText ol li {
padding-left: 5px;
background: #FFF;color:#aa0000;
margin-bottom:1px;
}    

其中红色代码为自己添加的.其中line-height为代码行高度,margin-bottom指定行底部间距.

给Z-blog的FCKeditor加上代码高亮插件

因为要写点代码在日志里面,光是文本显示感觉不爽,一直想找个高亮显示的插件.找到了dp.SyntaxHighlighter.弄了很久都没弄好,先是在模版里改,显示效果不是很好,而且一旦换了模版后还是要再改一次.所以就想法从编辑器着手.网上搜索之后,发现很多好的办法,无奈人笨,选了个简单的. 让FCKEditor与dp.syntaxhighlighter完美结合

下载插件,然后解压,放置在你的FCK里的plugins目录,或者其他自定义的plugin目录。
1、修改你的config文件,在ToolbarSet里加上'HighLighter'。

// Set toolbar.
FCKConfig.ToolbarSets["custom"] = [
['HighLighter','Placeholder','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow']
] ;        

2、根据你指定的plugin目录,注册plugin

// Change the default plugin path.
FCKConfig.PluginsPath = FCKConfig.BasePath.substr(0, FCKConfig.BasePath.length - 7) + 'editor/customPlugins' ;
//注意这里,就是调用syntaxhighlighter插件的地方
FCKConfig.Plugins.Add( 'highlighter' , 'en') ;  

当然实现的方法不只一种,在无忧论坛上也有比较好的解决方法http://bbs.5u.hk/viewthread.php?tid=3308用的是insertCode