两步教你开启KindEditor代码高亮功能

2014-04-23 09:13

KindEditor(下面简称KE)虽然是一个国产货,可并不比洋货(CKEditor)逊色,尤其是插件和API功能,越来越出色了,其中4.0推出了代码高亮功能。
不过该功能在官方文档上并没有相关的说明,这一点要批评一下,这么好使的功能为什么不让大家都用上呢。
我整理了一下用法,供大家参考。

前台页面先加载插件脚本和样式:

1
2
3
4
5
<link rel="stylesheet" type="text/css" href="[kePath]/plugins/code/prettify.css" />
<script type="text/javascript" src="[kePath]/plugins/code/prettify.js"></script>
<script>
$(function(){ prettyPrint(); });
</script>

后台编辑器声明的时候加上插件样式,缺省这个参数,编辑器中插入代码跟普通文字一样,并且再次编辑的时候被隐藏了,所以这一步很关键。

1
2
3
var editor = KindEditor.create('textarea.editor', {
    cssPath : ['[kePath]/plugins/code/prettify.css']
});
^