FCKedit 代码高亮插件 -LYWILL设计运营 - 网站运营与推广、开发技术、成功项目展示。

2012年02月13日 21:57:06

FCKedit 代码高亮插件

由于经常要发一些含有代码的日志，默认的FCKedit不支持格式化代码，非常不方便。今天在网上找到了一个FCKedit的代码高亮插件，刚刚部署，效果非常不错，推荐一下！

　　首先把insertcode整个文件夹放在FCK的plugins文件夹下，在Z-blog里就是~/admin/FCKeditor/editor/plugins 。然后把fck_editorarea.css 复制到FCKeditor/editor/css下，直接覆盖。修改FCKeditor/fckconfig.js文件，在 FCKConfig.Plugins.Add( ‘Media’, ‘zh-cn’ ) ;下面加上如下一行：

 
JavaScript代码
FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ;   
FCKConfig.Plugins.Add( 'Media', 'zh-cn' ) ;   
FCKConfig.Plugins.Add( 'insertcode' ) ;   
 

　　同样在fckconfig.js文件，然后修改FCKConfig.ToolbarSets，如下：注,一下修改可根据项目需要来修改，不一定要一样，只要记得在里面加上‘InsertCode’ 这个项就好了，如下：

JavaScript代码
FCKConfig.ToolbarSets["Default"] = [   
    ['Source','FontName','FontSize'],   
    ['TextColor','BGColor'],   
['Image','Media','Flash','Table','Smiley','SpecialChar'],   
    ['ShowBlocks','Preview','FitWindow'],   
    '/',   
    ['PasteText','Templates','Find','RemoveFormat'],   
    ['Undo','Redo'],   
    ['-','Bold','Italic','Underline','StrikeThrough'],   
    ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],   
    ['JustifyLeft','JustifyCenter','JustifyRight'],   
    ['Link','Unlink','Rule'],   
    ['Subscript','Superscript','-','InsertCode'] // No comma for the last row.   
] ;   
  
FCKConfig.ToolbarSets["Basic"] = [   
['Source','Bold','Italic','TextColor','Image','Link','-','InsertCode']   
] ;   
  
FCKConfig.EnterMode = 'p' ; // p | div | br   
FCKConfig.ShiftEnterMode = 'br' ; // p | div | br   
 

　　然后，千万别忘记修改FCKeditor/editor/lang 下的语言文件，我就是忘记这个了。在语言文件（zh-cn.js & en.js）里最后一行加上InsertCodeBtn : “插入代码” 例如：

JavaScript代码
// About Dialog   
DlgAboutAboutTab : "关于",   
DlgAboutBrowserInfoTab : "浏览器信息",   
DlgAboutLicenseTab : "许可证",   
DlgAboutVersion : "版本",   
DlgAboutInfo : "要获得更多信息请访问 ",   
InsertCodeBtn : "插入代码"  
};   
 
　　最后，在你的主题里修改模板文件single.html  ，增加：

XML/HTML代码
<link rel="stylesheet" rev="stylesheet" href="<#ZC_BLOG_HOST#>ADMIN/FCKeditor/editor/plugins/insertcode/insertcode.css" type="text/css" />  
 
　　根据自己的FCK路径不同实际实际填写路径也有所不同。修改后替换后，需要在后台中进行“文件重建”操作一下方可生效。