xhEditor实现插入代码功能

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



开源中国



CSDN

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

一、首先定义插件样式

[css] view
plaincopy

<style type="text/css">  

     /* 增加插入代码工具图标 */  

    .btnCode {  

        background: transparent url(img/code.png) no-repeat 0px 0px;  

        background-position: 3px -2px;  

    }  

</style>  

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

定义插件的javascript代码 

[javascript] view
plaincopy

<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)
e52d
,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())+'</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