参见
http://blog.csdn.net/tingliting/article/details/50505280
http://blog.csdn.net/tingliting/article/details/50505280
http://www.cnblogs.com/top8/p/6207814.html
后台代码
修改kindeditor代码
1.修改kindeditor/plugins/code/code.js
第一处修改，kindeditor默认标示修改成SyntaxHighlighter
html = ['<div style="padding:10px 20px;">',
'<div class="ke-dialog-row">',
'<select class="ke-code-type">',
'<option value="js">JavaScript</option>',
'<option value="html">HTML</option>',
'<option value="css">CSS</option>',
'<option value="php">PHP</option>',
'<option value="pl">Perl</option>',
'<option value="py">Python</option>',
'<option value="java">Java</option>',
'<option value="cpp">C/C++</option>',
'<option value="c-sharp">C#</option>',
'<option value="xml">XML</option>',
'<option value="shell">Shell</option>',
'<option value="">Other</option>',
'</select>',
'</div>',
第二处修改：
找到下面的代码，将2行源代码注释掉，并加上下面两行
注意在后面加上p标签，目的是加入代码块后，光标可以点击下面一行
var type = K('.ke-code-type', dialog.div).val(),
code = textarea.val(),
//cls = type === '' ? '' : ' lang-' + type,
//html = '<pre class="prettyprint' + cls + '">\n' + K.escape(code) + '</pre> ';
cls = type === '' ? '' : type,
html = '<pre class="brush: ' + cls + '">\n' + K.escape(code) + '</pre> <p></p>';
在后台kindeditor页面加上如下代码
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="${domain}/kindeditor-4.1.10/themes/default/default.css" />
<script charset="utf-8" src="${domain}/kindeditor-4.1.10/kindeditor-min.js?v=1"></script>
<script charset="utf-8" src="${domain}/kindeditor-4.1.10/lang/zh_CN.js?v=1"></script>
//加载KindEditor
var editor;
/*
*/
KindEditor.ready(
function(K) {
editor=K.create('#contentText', {
cssPath: '${domain}/kindeditor-4.1.10/code.css',
allowFileManager : true,
items : [
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', '|', 'source', '|', 'preview', 'template', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
'table', 'hr', 'emoticons', 'baidumap',
'anchor', 'link', 'unlink','code'
]
});
}
);
注意上面的代码要加上cssPath，原因：输入框内的代码不会有任何变化，加此代码，输入框内的代码有底色，此code.css是我自己写的，很简单，如下
pre {
margin: .5em 0;
padding: .4em .6em;
border-radius: 8px;
background: #f8f8f8;
}
前台页面
在前台页面加上下面的的引用，此处根据代码，自动加载js文件
<!-- syntaxhighlighter代码高亮 -->
<script type="text/javascript" src="${domain}/syntaxhighlighter-3.0.83/scripts/XRegExp.js"></script>
<script charset="utf-8" src="${domain}/syntaxhighlighter-3.0.83/scripts/shCore.js"></script>
<script src="${domain}/syntaxhighlighter-3.0.83/scripts/shAutoloader.js"></script><!-- 自动加载 -->
<link rel="stylesheet" href="${domain}/syntaxhighlighter-3.0.83/styles/shCore.css" />
<link rel="stylesheet" href="${domain}/syntaxhighlighter-3.0.83/styles/shCoreDefault.css" />
在页面的下面加上如下代码，注意修改第5行代码，改成自己的真实路径
function path() {
var args = arguments,
result = [];
for (var i = 0; i < args.length; i++)
result.push(args[i].replace('$', '/syntaxhighlighter-3.0.83/scripts/'));
return result
}
$(function () {
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();
});