xhEditor实现插入代码功能详解编程语言

如果大家经常使用CSDN或者其他技术博客,都会有插入程序代码或脚本功能

开源中国

CSDN

这里介绍xhEditor实现插入代码功能,对xhEditor进行插件扩展

一、首先定义插件样式

<style type="text/css"> 
	 /* 增加插入代码工具图标 */ 
	.btnCode { 
		background: transparent url(img/code.png) no-repeat 0px 0px; 
		background-position: 3px -2px; 
	} 
</style>

二、然后是定义插件,先确定插件的名称(这里取名为plugins),然后定义这个创建相关的参数(具体查看xheditor的api文档)代码大致如下：
定义插件的javascript代码

<script type="text/javascript"> 
      $(function(){ 
	   var plugins={ 
		Code:{c:'btnCode',t:'插入代码',h:1,e:function(){ 
			var _this=this; 
			var htmlCode="<div>编程语言<select id='xheCodeType'>"; 
				htmlCode+="<option value='html'>HTML/XML</option>"; 
				htmlCode+="<option value='js'>Javascript</option>"; 
				htmlCode+="<option value='css'>CSS</option>"; 
				htmlCode+="<option value='php'>PHP</option>"; 
				htmlCode+="<option value='java'>Java</option>"; 
				htmlCode+="<option value='py'>Python</option>"; 
				htmlCode+="<option value='pl'>Perl</option>"; 
				htmlCode+="<option value='rb'>Ruby</option>"; 
				htmlCode+="<option value='cs'>C#</option>"; 
				htmlCode+="<option value='c'>C++/C</option>"; 
				htmlCode+="<option value='vb'>VB/ASP</option>"; 
				htmlCode+="<option value=''>其它</option>"; 
				htmlCode+="</select></div><div>"; 
				htmlCode+="<textarea id='xheCodeValue' wrap='soft' spellcheck='false' style='width:300px;height:100px;' />"; 
				htmlCode+="</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="brush: '+jType.val()+'">'+_this.domEncode(jValue.val())+'

 ‘);
_this.hidePanel();
return false;
});
_this.saveBookmark();
_this.showDialog(jCode);
}},

};
$(‘#content’).xheditor({
plugins:plugins,//使用我们定义的插件 
loadCSS:'<style>pre{margin-left:2em;border-left:3px solid #CCC;padding:0 1em;}</style>’,
});
})
</script>

三、OK效果如下

和CSDN效果是一样一样的,因为CSDN用的就是xhEditor

项目演示源码下载：http://download.csdn.net/detail/blog.ytso.com/7750927

转载请注明出处：blog.ytso.com/article/details/38495623