加入收藏 | 设为首页 | 会员中心 | 我要投稿 河北网 (https://www.hebeiwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营 > 正文

fckeditor 代码语法高亮的实现要领

发布时间:2018-10-07 07:04:37 所属栏目:运营 来源:站长网
导读:这两个礼拜有点空,就再研究了一下语法高亮的题目,找了一下FCKeditor官方网站,发明2.5.1不变版已经出来了,起首替代掉旧的2.0。呵呵,我喜好行使新版。 先是IE: 1、遗留的题目:潜匿的源码和名目化后的代码有会有题目。 经前次研究的功效,两处的代码有
副问题[/!--empirenews.page--]

这两个礼拜有点空,就再研究了一下语法高亮的题目,找了一下FCKeditor官方网站,发明2.5.1不变版已经出来了,起首替代掉旧的2.0。呵呵,我喜好行使新版。

先是IE:

1、遗留的题目:潜匿的源码和名目化后的代码有会有题目。
经前次研究的功效,两处的代码有也许差池,首要是HTML的出格代码,像代码里有标签<div>,JavaScript代码里有&alt等。这里的办理要领很简朴:只要替代一下就可以了,不外要留意,在举办名目化之前就举办替代。由于潜匿的代码也是要替代的,最后取的时辰也要替代归去,可是要反次序。代码如下:

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com] .replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g,'>');

2、在FCKeditor里许多控件都有右键菜单可以修改其属性,代码高亮我也想增进一个!到FCKeditor官方网站找了一遍乐成的增进了,代码如下(代码放在fckplugin.js):

Copy to ClipboardLiehuo.Net Codes引用的内容:[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 ClipboardLiehuo.Net Codes引用的内容:[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 ClipboardLiehuo.Net Codes引用的内容:[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属性没用,就直接拿来用就可以了。这个简朴,我就不给代码了。
IE里的修改算是完成了,并且较量美满。
再来FF:

本人用体系,用软件都用得较量杂,偶然辰会用用FF,以是修改的对象必然要支持FF。再说,FCKeditor自己是兼容IE和FF的,增进的插件只支持IE有点说不外去。
1、起首试用了一下结果:发明已经可以插入,不外不行以修改。双击变乱也有用,但也是不能修改。这个缘故起因是由于FF跟IE差异,IE里可以把DIV标签直接选择,FF里不行以。以是要加一个单击的变乱,让代码辅佐FF选择顶层元素,原始代码是从FCKeditor的Placeholder插件里COPY过来的(代码放在fckplugin.js):

Copy to ClipboardLiehuo.Net Codes引用的内容:[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 ) ;
}
}}
);

(编辑:河北网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读