首页 > 代码库 > xhEditor实现插入代码功能

xhEditor实现插入代码功能

2024-07-17 11:20:41   214人阅读

如果大家经常使用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=http://www.mamicode.com/‘html‘>HTML/XML";>

三、OK效果如下


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

项目演示源码下载：xxx


联系
我们