跳转到主内容
极星编程网:以代码为星,赴技术山海!

FCKEditor SyntaxHighlighter整合实现代码高亮显示

因此上网查了许多资料,没有说怎么做的,都是自己改好一个包上传。我研究了一个这些整合好的例子,粗略说一说,对以后开发其它FCKeditor插件也有好处。 为方便大家使用,脚本之家特提供两个已经做成插件的版本。 下载地址 第一步:在FCKeditor的路径中找到“editor\plugins\”,在其中创建“highlighter”文件夹。 第二步:将“dp.SyntaxHighlighter\Scripts”文件夹复制到此文件夹中,所有的js文件和一个flash文件也要一通复制过来。 第三步:在“highlighter\”创建“lang”文件夹,在其中新建“zh-cn.js”文件,内容如下—— 复制代码 代码如下: FCKLang.CodeBtn = '插入高亮代码' ; FCKLang.CodeArea = '代码'; FCKLang.CodeDlgTitle = '插入高亮代码' ; FCKLang.CodeDlgName = '语言' ; FCKLang.CodeErrNoName = '请输入代码' ; 第四步:在“highlighter\”创建“fckplugin.js”,内容如下——此文件内容也可以参考其他plugins目录下的同名文件。 复制代码 代码如下: // Register the related commands. //FCKCommands.RegisterCommand( 'HighLighter', new FCKDialogCommand("HighLighter",FCKLang.DlgHighLighterTitle,FCKConfig.Plugins.Items['highlighter'].Path + 'highlighter.html', 540, 540 ) ) ; FCKCommands.RegisterCommand( 'HighLighter', new FCKDialogCommand("HighLighter",FCKLang['CodeDlgTitle'],FCKConfig.PluginsPath + 'highlighter/highlighter.html', 540, 500 ) ) ; // Create the "highlighter" toolbar button. var oHighLighterItem        = new FCKToolbarButton( 'HighLighter', FCKLang['CodeBtn'] ) ; oHighLighterItem.IconPath    = FCKConfig.PluginsPath + 'highlighter/highlighter.gif' ; FCKToolbarItems.RegisterItem( 'HighLighter', oHighLighterItem );// 'HighLighter' is the name used in the Toolbar config. var FCKHighLighter = new Object(); var CSS_PATH      = FCKConfig.PluginsPath + "highlighter/dp.SyntaxHighlighter/Styles/"; var pool = {"firstCss" : true }; FCKHighLighter.Add = function( value ){ var oDiv = FCK.CreateElement("div"); oDiv._FCKhighLighter = "hlDiv" + Math.random() ; oDiv.className="dp-highlighter"; oDiv.innerHTML = value; if(pool.firstCss) { pool.firstCss = false; //oDiv.innerHTML += ""; } // alert(oDiv.innerHTML); } FCKHighLighter.OnDoubleClick = function( div ){ //    if(div._FCKhighLighter = "hlDiv") FCKCommands.GetCommand( 'HighLighter' ).Execute() ; if(div.className == "dp-highlighter" && div.tagName=="DIV") FCKCommands.GetCommand( 'HighLighter' ).Execute() ; } FCK.RegisterDoubleClickHandler( FCKHighLighter.OnDoubleClick, 'DIV' ) ; 第五步:找一个21×21px的gif图片作为按钮,取名为“highlighter.gif”。 第六步:关键步骤,创建插入代码对话框,取名为“highlighter.html”。内容如下—— 复制代码 代码如下: 插入代码