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='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=" '+jType.val()+'">'+_this.domEncode(jValue.val())+'</pre> ');
				_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/itmyhome/7750927

转载请注明出处：http://blog.csdn.net/itmyhome1990/article/details/38495623