由于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</opt