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

xhEditor实现插入代码功能相关推荐

typora插入代码设置_Typora基本功能介绍
Typora是什么? 提起Typora,如果是使用过Markdown的人,应该就不太陌生,Typora 是一款支持实时预览的 Markdown 文本编辑器.它有 OS X.Windows.Linux ...
帝国CMS默认编辑器插入代码插件
介绍: 帝国cms自带的编辑器没有插入代码的功能,这个功能对于一些技术站点来讲是非常有必要的. 安装方法: 1.下载附件包,解压到/e/admin/ecmseditor/infoeditor/plug ...
博客园编辑器插入code功能试用及与EditPlus的语法高亮比较
支持功能:语法高亮.显示行号.代码折叠:支持21种语言,包括:Python, Perl, VBScript, CSS, C#, MSIL, VB.NET, C++, XAML, BatchFile, ...
在技术社区以外的博文中插入代码（把代码转换到 Html 文本）
[2019 - 01 - 27 更新]发布 CodeToHtml V 1.2 版本.下载链接: https://files.cnblogs.com/files/hoodlum1980/CodeToHt ...
python3 删除指定的PPT页，根据关键词是否删除PPT页在这里插入代码片
python3 删除PPT指定的页码,根据关键词是否删除PPT页在这里插入代码片 # encoding:utf-8 from pptx import Presentationdef pptxde(pp ...
字节码插桩(javassist)之插入代码块|IOC框架(Hilt)之对象注入~研究
Hilt对象注入 | javassist插桩研究 Hilt对象注入 javassist字节码插桩创建buildSrc的module 重写Transform 熟悉TransformInvocatio ...
利用输入法的用户自定义短语，快速插入代码框架，解放双手
输入法自定义短语,快速插入代码框架目录输入法自定义短语,快速插入代码框架 1.样例 2.设置方法(以百度输入法为例) 3.分享几个自己常用的代码块 3.1 代码骨架模板 3.2 常用短语模板 1. ...
Ubuntu（Debian）截图并编辑软件推荐：Flameshot（实现类似QQ的截图功能，具有插入文字功能）
Ubuntu(Debian)截图并编辑软件推荐:Flameshot(实现类似QQ的截图功能) 一具有文字插入功能的安装教程 1.1 卸载原有的flameshot 1.2 clone github 1 ...
如何在word里面优雅地插入代码
如何在word里面优雅地插入代码背景 Word没有专门用于展示代码的版块,不具备Markdown功能,因此许多人在Word粘贴代码后没有对其进行深入处理. 插入代码进入word时,代码总是显得不太美 ...

xhEditor实现插入代码功能

xhEditor实现插入代码功能相关推荐

最新文章

热门文章