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 / 

 htmlCode+=" /div div 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

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/14476.html