asp.net中fckeditor开发代码高亮插件

发布时间:2020-10-28编辑:脚本学堂
本文介绍了asp.net为fckeditor编辑器开发代码高亮插件的方法,有需要的朋友参考下。

在使用fckeditor编辑器,在博客中插入代码,网上介绍的都是修改fckeditor的fckeditorcode_gecko.js和fckeditorcode_ie.js以达到insertcode的目的。
这个方法非常麻烦,当要使用fckeditor新版本时都要重新修改这两个文件,非常影效率。

所以就为fckeditor写了个insertcode的插件。整个插件的制作过程非常简单:
fckeditor插件开发请参考fckeditor官网的文档:
http://docs.fckeditor.net/fckeditor_2.x/developers_guide/customization/plug-ins
首先,我们在fckeditor/editor/plugins目录下新建一个insertcode目录,并在insertcode目录下新建一个fckplugin.js文件。
在新建的fckplugin.js文件中插入代码:
 

复制代码 代码示例:
//插入代码
fckcommands.registercommand('insertcode', new fckdialogcommand('insertcode', fcklang.insertcode, fckplugins.items['insertcode'].path + 'insertcode.aspx', 700, 600)) ;
var insertcodeitem = new fcktoolbarbutton('insertcode', fcklang['insertcode']) ;
insertcodeitem.iconpath = fckplugins.items['insertcode'].path + 'images/insertcode.gif';
fcktoolbaritems.registeritem('insertcode', insertcodeitem);

在fckeditor/editor/plugins/insertcode目录下创建images,lang,languages目录,在lang目录下新建en.js,zh-cn.js。en.js的内容为:
fcklang.insertcode = 'insert codes' ;
zh-cn.js的内容为:
fcklang.insertcode = '插入代码' ;
下载codehighlighter控件并解压,把codehighlighter/bin目录下的actiprosoftware.codehighlighter.net20.dll,actiprosoftware.shared.net20.dll,codehighlightertest.dll三个dll复制到blogengine.web/bin目录,
将codehighlighter/languages里的lexers整个目录复制到fckeditor/editor/plugins/insertcode/languages目录,
将codehighlighter/images/outliningindicators/目录下的所有图片复制到fckeditor/editor/plugins/insertcode/images目录,并将这个图片下载保存到fckeditor/editor/plugins/insertcode/images/insertcode.gif。

在fckeditor/editor/plugins/insertcode/目录下新建insertcode.aspx,注意,如果是用visual studio新建的话
fckeditor代码高亮插件

insertcode.aspx内容:
 

复制代码 代码示例:

<%@ page language="c#" validaterequest="false" %>
<%@ register tagprefix="ch" namespace="actiprosoftware.codehighlighter" assembly="actiprosoftware.codehighlighter.net20" %>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<script runat="server">
static string code = string.empty;

protected void btnsubmit_click(object sender, eventargs e)
...{
code = txtcode.text;
highlighter.languagekey = ddllangtype.selecteditem.text;
highlighter.outliningenabled = chkoutlining.checked;
highlighter.linenumbermarginvisible = chklinenum.checked;
highlighter.text = code;
}
protected void page_load(object sender, eventargs e)
...{
if (!page.ispostback)
...{
codehighlighterconfiguration config = (codehighlighterconfiguration)configurationmanager.getsection("codehighlighter");
string[] keys = new string[config.languageconfigs.keys.count];
config.languageconfigs.keys.copyto(keys, 0);
array.sort(keys);
foreach (string key in keys)
...{
ddllangtype.items.add(key);
}
ddllangtype.selectedindex = ddllangtype.items.indexof(ddllangtype.items.findbytext("c#"));
}
}

protected void codehighlighter_postrender(object sender, eventargs e)
...{
if (!string.isnullorempty(highlighter.output))
...{
lblcode.text = highlighter.output.replace(" ", "  ").replace("n", "<br />");
response.write("<scr" + "ipt>window.parent.setokbutton( true );</scr" + "ipt>");
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>insertcode by moozi.net</title>
<script src="http://www.cnblogs.com/dialog/common/fck_dialog_common.js" type="text/javascript"></script>
<script type="text/javascript">
var oeditor = window.parent.innerdialogloaded() ;
// gets the document dom
var odom = oeditor.fck.editordocument ;

var oactiveel = oeditor.fckselection.getselectedelement() ;

window.onload = function()
...{
//window.parent.setokbutton( false );
}

function ok()
...{
if(gete('txtcode').value == '')
...{
alert("代码内容不能为空!");
return false;
}
oeditor.fck.inserthtml(document.getelementbyid("lblcode").innerhtml) ;
return true ;
}

</script>

<style type="text/css">
.langtype
...{
padding-bottom: 5px;
}
.btnrun
...{
padding-top: 5px;
text-align: right;
}
pre
...{
background-color: #f4f4f4;
border-style: solid;
border-width: 1px;
border-color: #c0c0c0;
font-family: courier new, monospace;
font-size: 10pt;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="langtype">
语言类型:<asp:dropdownlist id="ddllangtype" runat="server">
</asp:dropdownlist>
<asp:checkbox id="chkoutlining" text="折叠代码" runat="server" checked="true" />
<asp:checkbox id="chklinenum" text="允许行号" runat="server" checked="false" />
</div>
<div>
<asp:textbox id="txtcode" runat="server" textmode="multiline" width="640px" height="390px"></asp:textbox>
</div>
<div class="btnrun">
<asp:button id="btnsubmit" runat="server" text=" 转 换 " onclick="btnsubmit_click" />
<pre id="pre1" style="display: none;">
<ch:codehighlighter runat="server" id="highlighter" onpostrender="codehighlighter_postrender" />
</pre>
<asp:label id="lblcode" style="display: none;" runat="server"></asp:label>
</div>
</div>
</form>
</body>
</html>

接下来修改fckeditor/fckconfig.js,在原文件中我们能找到// fckconfig.plugins.add( 'autogrow' ) ;这段代码,在这段代码下一行插入:fckconfig.plugins.add( 'insertcode' , 'zh-cn,en' ) ;

最后修改web.config文件:(请参考codehighlighter/web.config)
在<configuration>里插入:
 

复制代码 代码示例:
<configsections>
<section name="codehighlighter" requirepermission="false" type="actiprosoftware.codehighlighter.codehighlighterconfigurationsectionhandler, actiprosoftware.codehighlighter.net20" />
</configsections>

在<system.web></system.web>后插入:
 

复制代码 代码示例:
<codehighlighter>
<cache languagetimeout="3" />
<keywordlinking enabled="true" target="_blank" defaultkeywordcollectionkey="actiprokeywords">
<keywordcollection key="actiprokeywords">
<explicitkeyword tokenkey="identifiertoken" patternvalue="actipro" url="http://www.actiprosoftware.com" casesensitive="false" />
<explicitkeyword tokenkey="identifiertoken" patternvalue="codehighlighter" url="http://www.codehighlighter.com" casesensitive="false" />
</keywordcollection>
</keywordlinking>
<languages>
<language key="assembly" definitionpath="~/fckeditor/editor/plugins/insertcode/languages/lexers/actiprosoftware.assembly.xml" />
<language key="batchfile" definitionpath="~/fckeditor/editor/plugins/insertcode/languages/lexers/actiprosoftware.batchfile.xml" />
<language key="c#" definitionpath="~/fckeditor/editor/plugins/insertcode/languages/lexers/actiprosoftware.csharp.xml" />
<language key="css" definitionpath="~/fckeditor/editor/plugins/insertcode/languages/lexers/actiprosoftware.css.xml" />
<language key="html" definitionpath="~/fckeditor/editor/plugins/insertcode/languages/lexers/actiprosoftware.html.xml" />
<language key="inifile" definitionpath="~/fckeditor/editor/plugins/insertcode/languages/lexers/actiprosoftware.inifile.xml" />
<language key="java" definitionpath="~/fckeditor/editor/plugins/insertcode/languages/lexers/actiprosoftware.java.xml" />
<language key="jscript" definitionpath="~/fckeditor/editor/plugins/insertcode/languages/lexers/actiprosoftware.jscript.xml" />
<language key="lua" definitionpath="~/fckeditor/editor/plugins/insertcode/languages/lexers/actiprosoftware.lua.xml" />
<language key="msil" definitionpath="~/fckeditor/editor/plugins/insertcode/languages/lexers/actiprosoftware.msil.xml" />
<language key="pascal" definitionpath="~/fckeditor/editor/plugins/insertcode/languages/lexers/actiprosoftware.pascal.xml" />
<language key="perl" definitionpath="~/fckeditor/editor/plugins/insertcode/languages/lexers/actiprosoftware.perl.xml" />
<language key="php" definitionpath="~/fckeditor/editor/plugins/insertcode/languages/lexers/actiprosoftware.php.xml" />
<language key="powershell" definitionpath="~/fckeditor/editor/plugins/insertcode/languages/lexers/actiprosoftware.powershell.xml" />
<language key="python" definitionpath="~/fckeditor/editor/plugins/insertcode/languages/lexers/actiprosoftware.python.xml" />
<language key="sql" definitionpath="~/fckeditor/editor/plugins/insertcode/languages/lexers/actiprosoftware.sql.xml" />
<language key="vb.net" definitionpath="~/fckeditor/editor/plugins/insertcode/languages/lexers/actiprosoftware.vbdotnet.xml" />
<language key="vbscript" definitionpath="~/fckeditor/editor/plugins/insertcode/languages/lexers/actiprosoftware.vbscript.xml" />
<language key="xaml" definitionpath="~/fckeditor/editor/plugins/insertcode/languages/lexers/actiprosoftware.xaml.xml" />
<language key="xml" definitionpath="~/fckeditor/editor/plugins/insertcode/languages/lexers/actiprosoftware.xml.xml" />
</languages>
<linenumbermargin forecolor="teal" paddingcharacter=" " visible="true" />
<outlining enabled="true" imagespath="~/fckeditor/editor/plugins/insertcode/images/" />
<spacesintabs count="4" />
</codehighlighter>

以后更换高版本的fckeditor时,只需要修改fckconfig.js将这个插件加入即可。