fckeditor 代码语法高亮的实现方法
|
副标题[/!--empirenews.page--]
这两个星期有点空，就再研究了一下语法高亮的问题，找了一下FCKeditor官方网站，发现2.5.1稳定版已经出来了，首先替换掉旧的2.0。呵呵，我喜欢使用新版。 先是IE： 1、遗留的问题：隐藏的源码和格式化后的代码有会有问题。  引用的内容：[www.veryhuo.com]
.replace(/&/g, "&") .replace(/</g, "<") .replace(/>/g,'>'); 2、在FCKeditor里很多控件都有右键菜单可以修改其属性，代码高亮我也想增加一个！到FCKeditor官方网站找了一遍成功的增加了，代码如下（代码放在fckplugin.js）： Copy to Clipboard引用的内容：[www.veryhuo.com]
// 添加右键菜单 FCK.ContextMenu.RegisterListener( { AddItems : function( menu, tag, tagName ) { if (!tag) return; var oDiv = tag; // 循环的作用看一下代码就知道了，是为了选择高亮代码的最顶层元素 while (oDiv.parentNode){ if (oDiv.tagName == usingTag && oDiv.className == usingFlag) break; oDiv = oDiv.parentNode; } // under what circumstances do we display this option if ( oDiv.tagName == usingTag && oDiv.className == usingFlag )//&& (tag._FCKHighLighter || tag.parentElement._FCKHighLighter) ) { FCKSelection.SelectNode( oDiv ) ; // when the option is displayed, show a separator the command menu.AddSeparator() ; // the command needs the registered command name, the title for the context menu, and the icon path menu.AddItem( 'HighLighter', FCKLang['DlgSyntaxHighLighterProperty'], oHighLighterItem.IconPath ) ; } }} ); 3、试用了一下效果，发现双击修改时只能双击代码行数左边的灰色才能弹出修改。我觉得不大方便，如果双击代码处也可以弹出修改就方便多了！嘿嘿，答案是肯定的，之前的代码已经注册了DIV标签的双击事件，所以再注册一下格式化后的代码用到的font和LI标签就可以了，代码如下（代码放在fckplugin.js）： Copy to Clipboard引用的内容：[www.veryhuo.com]
// 添加双击事件 FCK.RegisterDoubleClickHandler( FCKHighLighter.OnDoubleClick, usingTag ) ; // 双击灰色栏 FCK.RegisterDoubleClickHandler( FCKHighLighter.OnDoubleClick, 'font' ) ; // 双击代码 FCK.RegisterDoubleClickHandler( FCKHighLighter.OnDoubleClick, 'LI' ) ; // 双击代码区空白 // 添加双击事件 FCK.RegisterDoubleClickHandler( FCKHighLighter.OnDoubleClick, usingTag ) ; // 双击灰色栏 FCK.RegisterDoubleClickHandler( FCKHighLighter.OnDoubleClick, 'font' ) ; // 双击代码 FCK.RegisterDoubleClickHandler( FCKHighLighter.OnDoubleClick, 'LI' ) ; // 双击代码区空白 4、再试一下，发现双击代码行数这里可以进行修改。但是双击代码就不行，拿不到隐藏的源码。原因是因为在代码里双击的不是顶层元素，那简单，修改一下双击的代码，取得顶层元素就OK了（代码放在fckplugin.js）： Copy to Clipboard引用的内容：[www.veryhuo.com]
/ /双击事件处理代码 FCKHighLighter.OnDoubleClick = function( div ){ var oDiv = div; // 循环的作用看一下代码就知道了，是为了选择高亮代码的最顶层元素 while (oDiv.parentNode){ if (oDiv.tagName == usingTag && oDiv.className == usingFlag) break; oDiv = oDiv.parentNode; } if(oDiv.tagName == usingTag && oDiv.className == usingFlag) { FCKSelection.SelectNode( oDiv ) ; FCKCommands.GetCommand( 'HighLighter' ).Execute() ; } } 5、把编辑转到源代码再转回来的时候发现高亮的代码已经不可以编辑了。研究之下发现是用于标识的属性没有了，因为这个标识的属性是非标准的HTML属性。这个也好办，反正顶层的class属性没用，就直接拿来用就可以了。这个简单，我就不给代码了。 本人用系统，用软件都用得比较杂，有时候会用用FF，所以修改的东西一定要支持FF。再说，FCKeditor本身是兼容IE和FF的，增加的插件只支持IE有点说不过去。 引用的内容：[www.veryhuo.com]
// 单击事件处理代码 FCKHighLighter._ClickListener = function( e ) { var oDiv = e.target; // 循环的作用看一下代码就知道了，是为了选择高亮代码的最顶层元素 while (oDiv.parentNode){ if (oDiv.tagName == usingTag && oDiv.className == usingFlag) break; oDiv = oDiv.parentNode; } if ( oDiv.tagName == usingTag && oDiv.className == usingFlag ) FCKSelection.SelectNode( oDiv ) ; } FCKHighLighter._SetupClickListener = function (){ if (FCKBrowserInfo.IsGecko) FCK.EditorDocument.addEventListener( 'click', FCKHighLighter._ClickListener, true ) ; } // 添加单击事件 FCK.Events.AttachEvent( 'OnAfterSetHTML', FCKHighLighter._SetupClickListener ) ; // 添加右键菜单 FCK.ContextMenu.RegisterListener( { AddItems : function( menu, tag, tagName ) { if (!tag) return; var oDiv = tag; // 循环的作用看一下代码就知道了，是为了选择高亮代码的最顶层元素 while (oDiv.parentNode){ if (oDiv.tagName == usingTag && oDiv.className == usingFlag) break; oDiv = oDiv.parentNode; } // under what circumstances do we display this option if ( oDiv.tagName == usingTag && oDiv.className == usingFlag )//&& (tag._FCKHighLighter || tag.parentElement._FCKHighLighter) ) { FCKSelection.SelectNode( oDiv ) ; // when the option is displayed, show a separator the command menu.AddSeparator() ; // the command needs the registered command name, the title for the context menu, and the icon path menu.AddItem( 'HighLighter', FCKLang['DlgSyntaxHighLighterProperty'], oHighLighterItem.IconPath ) ; } }} ); （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
