kindeditor3.x升级到4.x 加入代码高亮功能

目前kindeditor已经升级到了4.1.2版本，其中4.0以上版本已经加入了代码高亮功能，所以决定把系统中kindeditor从3.x升级到最新的4.1.2，不过官方对于代码高亮功能，并未给予太多的说明，还需要自己做一些摸索，好在kindeditor的用户还是比较多的，相对资料也比较多。

对于kindeditor升级，官方给了一个说明文档，相对还是比较详细的：http://www.kindsoft.net/docs/upgrade.html

 

首先在kindeditor官网下载最新4.1.2版本的插件包：http://kindeditor.googlecode.com/files/kindeditor-4.1.2.zip

 

下载完毕后进行解压，目录中：

asp、jsp、php：这几个目录主要放着对应语言的示例程序

那么我们需要的主要是：lang、plugins、themes这几个文件夹，分别对应着是：语言包、插件包、主题样式

 

将这三个包，复制放到我们项目里去。

1.在要显示kindeditor的页面引入下面文件

<script charset="utf-8" src="/ke4/kindeditor.js"></script>
<script charset="utf-8" src="/ke4/lang/zh_CN.js"></script>

2.然后加入初始化代码

<script>
        var editor;
        KindEditor.ready(function(K) {
                editor = K.create('#editor_id', {
                        resizeType : 2,
                        uploadJson : '../php/upload_json.php'
                });
        });
</script>

3.kindeditor3.x和4.x版本间升级较大，4.x修改过一些参数名，所以3.x的初始化参数不一定直接兼容4.x

4.下面发一个自己配置过的代码供大家参考

<script type="text/javascript">
var editor;
KindEditor.options.filterMode = false;
KindEditor.ready(function(K) {
    editor = K.create('#editor', {
    resizeType : 1,
    uploadJson : '<%=basePath%>imgUpload.action',
    fileManagerJson: '<%=basePath%>fileManager.action',
    allowFileManager: true,
    items: ['bold','italic','underline','strikethrough','removeformat','|',
        'forecolor','hilitecolor','title','fontname','fontsize','|', 
        'justifyleft','justifycenter','justifyright','insertorderedlist',
        'insertunorderedlist','indent','outdent','|', 
        'link','unlink','code','image','table','hr','anchor','|',
        'quickformat','clearhtml','plainpaste', 'wordpaste','source'],
    width: "750px",
    height: "320px",
    themesPath: "<%=basePath%>styles/js/kindeditor4/themes/",
    pluginsPath: "<%=basePath%>styles/js/kindeditor4/plugins/",
    cssPath: "<%=basePath%>styles/js/kindeditor4/plugins/code/prettify.css"
});
    prettyPrint();
});
</script>

关于kindeditor4.x的初始化参数的说明，大家可以参考官方文档： http://www.kindsoft.net/docs/option.html

 

5.最后在提交数据时，发现一个问题，textarea中的内容并没有提交到后台，但是官方却给了如下说明：

KindEditor在默认情况下自动寻找textarea所属的form元素，找到form后onsubmit事件里添加sync函数，所以用form方式提交数据，不需要手动执行sync()函数。

 

解决办法：在数据提交前，加入同步：editor.sync();

例如：

if(validate_title() && validate_newsType()){
    editor.sync();
    $("#news_form").submit();
}

6.当输入html或script标签时，保存后，再次编辑数据时，发现内容在编辑器中不显示，切换html源码模式，也没有内容。原因是kindeditor开启了标签过滤功能，解决办法如下：

KindEditor.ready前添加

KindEditor.options.filterMode = false;

注：本文首发于 度外网络 官方博客： http://www.duwaiweb.com/blog/20120825_aaa2796e-e023-4618-b613-d6a18ed2f9fa.html

转载于:https://www.cnblogs.com/duwaiweb/archive/2012/08/26/2657306.html