一、下载插件：

xheditor:可到http://xheditor.com/下载

prettify:可到http://code.google.com/p/google-code-prettify/下载

xheditor是一款小巧的html编辑器，采用的是Jquery技术,相信很多人都用过。

prettify是Google开发的一款轻量级的代码高亮显示插件，这款插件比起常用的SyntaxHighlighter来，要小巧得多。它的原理就是将代码放到一个pre块里面，然后对pre块里面的内容进行高亮显示。

二、加载插件。

如果编辑器和显示内容是在同一个网页，那么需要加载js文件和css文件。

<script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="xheditor/xheditor-1.1.6-zh-cn.min.js"></script> 
<script type="text/javascript" src="xheditor/prettify/prettify.js"></script> 
<link href="xheditor/prettify/prettify.css" rel="stylesheet" type="text/css" /> 

前两行用于编辑器，后两行用于显示高亮代码。如果发表文章和显示文章分属两个页面，可分开加载。
上述最新版本prettify.js和prettify.css可在以下下载

http://xheditor.com/demos/prettify/prettify.js
http://xheditor.com/demos/prettify/prettify.css

三、修改编辑器

把xheditor下载解压后，可放到网站根目录文件夹xheditor里面，prettify下载解压后可放在文件夹xheditor里面，注意路径问题。

前台：

 <asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine" Width="98%" Height="400px"></asp:TextBox>

JS:

$(pageInit);
var editor;
function pageInit()
{
	var plugins={
		Code:{c:'btnCode',t:'插入代码',h:1,e:function(){
			var _this=this;
			var htmlCode='<div><select id="xheCodeType"><option value="html">HTML/XML</option><option value="js">Javascript</option><option value="css">CSS</option><option value="php">PHP</option><option value="java">Java</option><option value="py">Python</option><option value="pl">Perl</option><option value="rb">Ruby</option><option value="cs">C#</option><option value="c">C++/C</option><option value="vb">VB/ASP</option><option value="">其它</option></select></div><div><textarea id="xheCodeValue" wrap="soft" spellcheck="false" style="width:300px;height:100px;" /></div><div style="text-align:right;"><input type="button" id="xheSave" value="确定" /></div>';			var jCode=$(htmlCode),jType=$('#xheCodeType',jCode),jValue=$('#xheCodeValue',jCode),jSave=$('#xheSave',jCode);
			jSave.click(function(){
				_this.loadBookmark();
				_this.pasteHTML('<pre class="prettyprint lang-'+jType.val()+'">'+_this.domEncode(jValue.val())+'</pre>');
				_this.hidePanel();
				return false;	
			});
			_this.saveBookmark();
			_this.showDialog(jCode);
		}},
		map:{c:'btnMap',t:'插入Google地图',e:function(){
			var _this=this;
			_this.saveBookmark();
			_this.showIframeModal('Google 地图','/xheditor/demos/googlemap/googlemap.html',function(v){
				_this.loadBookmark();
				_this.pasteHTML('<img src="'+v+'" />');
			},538,404);
		}}
	};
	$('#<%=TextBox2.ClientID %>').xheditor({plugins:plugins,plugins:plugins,loadCSS:'<style>pre{margin-left:2em;border-left:3px solid #CCC;padding:0 1em;}</style>',emotMark:true,skin:'o2007silver',urlType:'abs',forcePasteText:false,cleanPaste:0,upImgUrl:'!{editorRoot}xheditor_plugins/multiupload/multiupload.html?uploadurl={editorRoot}demos/upload.asp?immediate=1&ext=1(*.jpg;*.jpeg;*.gif;*.png)',upFlashUrl:'!{editorRoot}xheditor_plugins/multiupload/multiupload.html?uploadurl={editorRoot}demos/upload.asp?immediate=1&ext=1(*.swf)',upMediaUrl:'!{editorRoot}xheditor_plugins/multiupload/multiupload.html?uploadurl={editorRoot}demos/upload.asp?immediate=1&ext=1(*.wmv;*.avi;*.wma;*.mp3;*.mid)'});
}

编辑器图标样式：

.btnCode {
	background:transparent url(/xheditor/demos/prettify/code.gif) no-repeat 16px 16px;
	background-position:2px 2px;
}
.btnFlv {
	background:transparent url(/xheditor/demos/mediaplayer/flv.gif) no-repeat 16px 16px;
	background-position:2px 2px;
}
.btnMap {
	background:transparent url(/xheditor/demos/googlemap/map.gif) no-repeat 43px 16px;
	background-position:2px 2px;
}

在显示页的body标记里面加上onload='prettyPrint()'

<script type="text/javascript">prettyPrint();</script>

效果如下

• 本文标题： XHEDITOR 插入ubb高亮代码效果
• 文章分类：【HTML/CSS】
• 非特殊说明，本文版权归【胡同里的砖头】个人博客 所有，转载请注明出处.

• 上一篇：身份证上面数字字体
• 下一篇： 复选框实现全选效果