结合SyntaxHighlighter给KindEditor3.5.5添加[插入源代码]自定义组件
来源：互联网 发布：伤城影评知乎 编辑：程序博客网 时间：2024/06/07 04:56
由于KindEditor3.5.5还没有“插入源代码”的功能组件（KindEditor4有了），如果想实现"插入源码"这个功能就必须自定义组件，庆幸的是KindEditor给自定义插件提供了良好的接口，因此不需要过多的代码就可以轻松的实现自定义组件的添加；同时如果想使插入的代码能像IDE软件那样高亮显示，这就需要整合SyntaxHighlighter库。它的原理是在<pre>标签中添加class实现样式的渲染，如<pre class="ruby"></pre>则以ruby的方式进行渲染。
好了废话不多说，现在我们就开始实现它（这里结合的是ruby on rails开发，我认为这对不熟悉ruby的人也有帮助）：
首先：给KindEditor添加插件：
1. 先在kindeditor/plugins目录下建创建一个code.html的文件
<!doctype html><html><head><meta charset="utf-8" /><title>KindEditor</title><style>body {font-size:12px;margin: 0px;background-color:#F0F0EE;overflow: hidden;}td.left1 {font-size:12px;width: 60px;padding: 2px;}td.right1 {font-size:12px;padding: 2px;}#sourceCode {font-size: 12px;resize: none;width: 315px;height: 180px; font-family: Verdana,"Lucida Grande",Arial,Helvetica,sans-serif;overflow-y: auto;line-height: 14px;}</style></head><body><table border="0" cellpadding="5" cellspacing="0"><tr><td class="left1">编程语言:</td><td class="right1"><select id="language" name="language" maxlength="255"> <option value="html">HTML/XML</option> <option value="js">JavaScript</option> <option value="css">CSS</option> <option value="php">PHP</option> <option value="csharp">C#</option> <option value="cpp">C++</option> <option value="java">Java</option> <option value="jfx">JavaFX</option> <option value="python">Python</option> <option value="perl">Perl</option> <option value="ruby">Ruby</option> <option value="vb">Visual Basic</option> <option value="delphi">Delphi</option> <option value="sql">SQL</option> <option value="applescript">AppleScript</option> <option value="actionscript3">ActionScript3</option> <option value="shell">Shell</option> <option value="cf">ColdFusion</option> <option value="plain">其它</option> </select></td></tr><tr><td colspan="2"> <textarea id="sourceCode" name="sourceCode"></textarea> </td></tr></table></body></html>2.自定义一个显示编辑器的方法，在helper文件中定义：
#产生一个文本编辑器 def edit_textarea_for(id, option= {} ) default_opts={:skinType=>"'default'", :resizeMode=> 0, :minWidth=>200, :minHeight=> 100, :width=>200, :height=> 100} default_opts.merge!(option) items = option[:items] || "[ 'source', '|', 'fullscreen', 'undo', 'redo', 'print', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', '|', 'selectall', '-', 'title', 'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold', 'italic', 'underline', 'strikethrough', 'removeformat', '|','code', 'image', 'flash', 'media', 'advtable', 'hr', 'emoticons', 'link', 'unlink', '|', 'about']" setting_params="skinType : #{default_opts[:skinType]}, resizeMode : #{default_opts[:resizeMode]}, minWidth : #{default_opts[:minWidth]}, minHeight : #{default_opts[:minHeight]}, width : #{default_opts[:width]}, height: #{default_opts[:height]}, items : #{items}" #设置图片上传的路径 if default_opts[:imageUploadJson] setting_params << ", imageUploadJson : '#{default_opts[:imageUploadJson]}'" end #设置远程图片管理的路径 if default_opts[:fileManagerJson] setting_params << ", fileManagerJson : '#{default_opts[:fileManagerJson]}', allowFileManager : true" end content_tag(:textarea, "#{default_opts[:values]}", {:id=>"#{id}", :name=>"#{id}",:style=>"width:#{option[:width]}px;height:#{option[:height]}px;"}) + javascript_include_tag("kindeditor/kindeditor.js") + javascript_tag(" //添加插入源代码插件 KE.lang['code']='插入源代码'; //编写插入源代码的事件处理 KE.plugin['code'] = {click : function(id) { KE.util.selection(id); //创建一个对话框 var dialog = new KE.dialog({ id : id, cmd : 'code', file : 'code.html', width : 330, height : 220, title : '插入源代码', //loadingMode : true, yesButton : KE.lang['yes'], noButton : KE.lang['no'] }); //显示对话框 dialog.show(); }, exec : function(id) {KE.util.select(id);var iframeDoc = KE.g[id].iframeDoc;var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog);//if (!this.check(id)) return false;//得到选中的语言var language= KE.$('language', dialogDoc).options[KE.$('language', dialogDoc).options.selectedIndex].value;//得到插入的源码var sourceCode = KE.$('sourceCode', dialogDoc).value;this.insert(id, language, sourceCode);}, insert : function(id, language, sourceCode) { var html='<pre class=\"brush: '+language+'; toolbar: true;\">'; html+=sourceCode+'</pre><br />';KE.util.insertHtml(id, html);KE.layout.hide(id);KE.util.focus(id);}}; KE.show({id : '#{id}', #{setting_params} });") end则在页面上调用这个方法来产生一个KindEditor编辑器如下：
<%= edit_textarea_for "article[content]", :height=> 450, :width=>700, :imageUploadJson=>url_for(:controller=>"image", :action=>"upload"), :fileManagerJson=>url_for(:controller=>"image", :action=>"show_image_list")%>这个编辑器的使用同我上一篇文章的那样，这里只不过多添加了一个自定义插件的代码，详情请参见它的官网，它对应的javascript代码如下：
//添加插入源代码插件 KE.lang['code']='插入源代码'; //编写插入源代码的事件处理 KE.plugin['code'] = {click : function(id) { KE.util.selection(id); //创建一个对话框 var dialog = new KE.dialog({ id : id, cmd : 'code', file : 'code.html', width : 330, height : 220, title : '插入源代码', //loadingMode : true, yesButton : KE.lang['yes'], noButton : KE.lang['no'] }); //显示对话框 dialog.show(); }, //当按“确定”按钮时触发 exec : function(id) {KE.util.select(id);var iframeDoc = KE.g[id].iframeDoc;var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog);//if (!this.check(id)) return false;//得到选中的语言var language= KE.$('language', dialogDoc).options[KE.$('language', dialogDoc).options.selectedIndex].value;//得到插入的源码var sourceCode = KE.$('sourceCode', dialogDoc).value;this.insert(id, language, sourceCode);}, insert : function(id, language, sourceCode) { var html='<pre class=\"brush: '+language+'\">'; html+=sourceCode+'</pre><br />';KE.util.insertHtml(id, html);KE.layout.hide(id);KE.util.focus(id);}}; KE.show({id : 'article[content]', skinType : 'default', resizeMode : 0, minWidth : 200, minHeight : 100, width : 700, height: 450, items : [ 'source', '|', 'fullscreen', 'undo', 'redo', 'print', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', '|', 'selectall', '-', 'title', 'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold', 'italic', 'underline', 'strikethrough', 'removeformat', '|','code', 'image', 'flash', 'media', 'advtable', 'hr', 'emoticons', 'link', 'unlink', '|', 'about'], imageUploadJson : '/image/upload', fileManagerJson : '/image/show_image_list', allowFileManager : true }); 这里关于KindEditor插件的创建可参考它的官网文档。
3.为添加的插件添加图标样式，在kindeditor/skins/default.css文件中添加：
/*自定义的插件的图标*/.ke-icon-code { background-image: url(./default/code.png); background-position: -2px -2px; width: 16px; height: 16px;} 这里的图标code.png采用CSDN中的图标素材，将它保存在kindeditor/skins/default目录中这里添加的代码实际上在一个<pre>标签中，为了能够在kindeditor编辑器中突出显示，在kindeditor/skins/common/editor.css文件中添加如下样式：
pre { background-color: #F0F0F0; margin: 4px 0;}接着：整合SyntaxHighlighter库实现高亮显示
将SysntaxHighighter的库文件改名为sh，放到项目目录public/javascripts中，这里为了rails的寻找css文件的方便将原先sh中的styles目录移至public\stylesheets\sh中，
然后在要显示源码内容的页面上引用如下的文件：
<%= stylesheet_link_tag "sh/styles/shCoreDefault.css" %><%= stylesheet_link_tag "sh/styles/shThemeDefault.css" %><%= stylesheet_link_tag "sh/styles/shCore.css" %><%= javascript_include_tag 'sh/scripts/shCore.js' %><%= javascript_include_tag 'sh/scripts/shAutoloader'%>再插入如下的执行代码，实现代码的渲然显示：
<script type="text/javascript"> function path() { var args = arguments, result = []; for(var i = 0; i < args.length; i++) result.push(args[i].replace('@', '../../javascripts/sh/scripts/')); return result }; SyntaxHighlighter.autoloader.apply(null, path( 'applescript @shBrushAppleScript.js', 'actionscript3 as3 @shBrushAS3.js', 'bash shell @shBrushBash.js', 'coldfusion cf @shBrushColdFusion.js', 'cpp c @shBrushCpp.js', 'c# c-sharp csharp @shBrushCSharp.js', 'css @shBrushCss.js', 'delphi pascal @shBrushDelphi.js', 'diff patch pas @shBrushDiff.js', 'erl erlang @shBrushErlang.js', 'groovy @shBrushGroovy.js', 'java @shBrushJava.js', 'jfx javafx @shBrushJavaFX.js', 'js jscript javascript @shBrushJScript.js', 'perl pl @shBrushPerl.js', 'php @shBrushPhp.js', 'text plain @shBrushPlain.js', 'py python @shBrushPython.js', 'ruby rails ror rb @shBrushRuby.js', 'sass scss @shBrushSass.js', 'scala @shBrushScala.js', 'sql @shBrushSql.js', 'vb vbnet @shBrushVb.js', 'xml xhtml xslt html @shBrushXml.js' )); SyntaxHighlighter.all();</script>上面的渲染实现的是自动加载式的渲染，它不需要一个一个的添加对应渲染文件，这样极大的简化了SysntaxHighighter的使用，详情>>>
如上简单的几步就实现了KindEditor源代码的插入与高亮显示功能！
上面总结的只是几处代码的粘贴，也许有些细节讲述的不是很清楚，需要读者自已去查看它们的官方网站的相关文档；同时如果有错误地方欢迎批评指出！！
- 结合SyntaxHighlighter给KindEditor3.5.5添加[插入源代码]自定义组件
- FLEX中给组件添加自定义事件
- FLEX中给组件添加自定义事件
- FLEX中给组件添加自定义事件
- 给openwrt添加wifidog组件
- 传递引用给自定义组件
- 给自定义组件加事件
- 给表单添加自定义菜单
- 使用dp.SyntaxHighlighter加亮源代码脚本
- SyntaxHighlighter
- SyntaxHighlighter
- SyntaxHighlighter
- Flex组件组件添加自定义事件
- Android自定义组件添加组件的属性
- Flex组件组件添加自定义事件
- OpenGL源代码之给多边形添加颜色
- Android给自定义控件添加自定义属性
- 如何给自定义控件添加自定义属性
- android的theme的用法
- EM算法介绍
- python 字符串转数组
- 为PE文件添加数字签名 .
- shell $() 与${} 的语法
- 结合SyntaxHighlighter给KindEditor3.5.5添加[插入源代码]自定义组件
- Linux学习：内核访问I/O资源的方法
- 数据库中group by和having语法使用详解
- Ogre游戏 - Torchlight
- 2011搜狗校招笔试 程序输出
- 声明一个父类A，它只有一个非默认构造方法；声明A的子类B，B具有默认构造方法及非默认方法，并在B的构造方法中调用基类A的构造方法。
- Windows7在访问网络共享文件夹提示“登陆失败：未知的用户名或密码错误”
- 程序设计的惯用手法
- poj1836
