fckeditor 代码语法高亮的实现方法
副问题[/!--empirenews.page--]
这两个礼拜有点空,就再研究了一下语法高亮的题目,找了一下FCKeditor官方网站,发明2.5.1不变版已经出来了,起首替代掉旧的2.0。呵呵,我喜好行使新版。 先是IE: 1、遗留的题目:潜匿的源码和名目化后的代码有会有题目。 .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有点说不外去。 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 ) ; } }} ); (编辑:河北网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |