结合SyntaxHighlighter给KindEditor3.5.5添加[插入源代码]自定义组件
由于KindEditor3.5.5还没有“插入源代码”的功能组件（KindEditor4有了），如果想实现"插入源码"这个功能就必须自定义组件，庆幸的是KindEditor给自定义插件提供了良好的接口，因此不需要过多的代码就可以轻松的实现自定义组件的添加；同时如果想使插入的代码能像IDE软件那样高亮显示，这就需要整合SyntaxHighlighter库。它的原理是在<pre>标签中添加class实现样式的渲染，如<pre class="ruby"></pre>则以ruby的方式进行渲染。
好了废话不多说，现在我们就开始实现它（这里结合的是ruby on rails开发，我认为这对不熟悉ruby的人也有帮助）：
![结合SyntaxHighlighter给KindEditor3.5.5添加[插入源代码]自定义组件_第1张图片](http://img.e-com-net.com/image/info5/404de111a82d491b95b334f18385675a.jpg)
![结合SyntaxHighlighter给KindEditor3.5.5添加[插入源代码]自定义组件_第2张图片](http://img.e-com-net.com/image/info5/2090ed7afc434c3f9be5dea123c3bf72.png)
![结合SyntaxHighlighter给KindEditor3.5.5添加[插入源代码]自定义组件_第3张图片](http://img.e-com-net.com/image/info5/3694d0a8e99e41309f9e5c7585578ac5.png)
首先：给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源代码的插入与高亮显示功能！
上面总结的只是几处代码的粘贴，也许有些细节讲述的不是很清楚，需要读者自已去查看它们的官方网站的相关文档；同时如果有错误地方欢迎批评指出！！