KindEditor编辑器使用添加分页功能

KindEditor分页器只是一条横线

我们使用JS实现分页功能

1. KindEditor.js

var content = new Object;
var context = "";
var pgindex = [];
var cont = [];
var pagesel = "";
var contpg = 0;

/*initpg()用于初始化和置空变量并搜索标签位置：*/
function initpg() {
    contpg = 0;
    pgindex.splice(0, pgindex.length);
    pgindex[0] = 0;
    cont.splice(0, cont.length);
    pagesel = "";

    content = document.getElementById("nc_con");
    context = content.innerHTML;
    /*于是将关键字缩小到不包含分号并在头部加入浏览器判断：*/
    var Sys = {};
    var ua = navigator.userAgent.toLowerCase();

    if (window.ActiveXObject) {//适用ie9和ie10版本
        Sys.ie = ua.match(/msie ([\d.]+)/)[1]

    } else if (!!window.ActiveXObject || "ActiveXObject" in window) {//适用ie11版本
        Sys.ie = "11";
    }
    /*在实际使用中发现，chrome和FF测试均通过，IE却不行，仔细试验发现，在不同浏览器生成的标签是不同的（部分IE下为大写字母，并且存在有；和没有；的差异）*/
    if (Sys.ie) {
        var i = 0;
        var j = 1;
        var tmpp = 0;
        while (tmpp = context.indexOf("<hr class=\"ke-pagebreak\"", i)) {
            if (tmpp != -1) {
                pgindex[j++] = tmpp;
                i = tmpp + 30;
            } else {
                break;
            }
        }
    } else {
        var i = 0;
        var j = 1;
        var tmpp = 0;
        while (tmpp = context.indexOf("<hr style=\"page-break-after:always;\" class=\"ke-pagebreak\">", i)) {
            if (tmpp != -1) {
                pgindex[j++] = tmpp;
                i = tmpp + 30;
            } else {
                break;
            }
        }
    }
}
/*pagese()依据当前所在页码确定所需的控制换页按钮选项，即pagesel的内容，pagesel在searchpg()中被使用。*/
function searchpg() {
    if (pgindex.length > 1) {
        for (var i = 0; i < pgindex.length; i++) {
            cont[i] = context.substring(pgindex[i], pgindex[i + 1]);
        }
        pagese();
        content.innerHTML = cont[0];
        document.getElementById("nc_page").innerHTML = pagesel;//换页使用的按钮内容输出在id=nc_page元素下
    } else
        pagese();
    document.getElementById("nc_page").innerHTML = pagesel;
}
/*pagese()依据当前所在页码确定所需的控制换页按钮选项，即pagesel的内容，pagesel在searchpg()中被使用*/
function pagese() {
    if (cont.length > 0) {

        if (contpg == 0) {
            pagesel = "<a href='#' class='newpage'>" + "文章共" + cont.length + "页 当前第" + (contpg + 1) + "页</a><br/><hr /><a href='#' class='firstpage'>首 页 </a><a href='#' class='prepage'>上一页</a> <a href='#' onclick='nextpa()' class='nextpage'>下一页</a>  <a href='#' onclick='endpa()' class='endpage'>末 页</a>";
        } else if (contpg != 0 && contpg < cont.length - 1) {
            pagesel = "<a href='#' class='newpage'>" + "文章共" + cont.length + "页 当前第" + (contpg + 1) + "页</a><br/><hr /><a href='#' onclick='firstpa()' class='firstpage'>首 页</a> <a href='#' onclick='prepa()' class='prepage'>上一页</a>  <a href='#' onclick='nextpa()' class='nextpage'>下一页</a> <a href='#' onclick='endpa()' class='endpage'>末 页</a>";
        } else if (contpg == cont.length - 1) {
            pagesel = "<a href='#' class='newpage'>" + "文章共" + cont.length + "页 当前第" + (contpg + 1) + "页</a><br/><hr /><a href='#' onclick='firstpa()' class='firstpage'>首 页</a> <a href='#' onclick='prepa()' class='prepage'>上一页</a> <a href='#' class='nextpage'>下一页</a> <a href='#' class='endpage'>末 页</a>";
        }
    } else {
        pagesel = "";
        //pagesel="<a href='#' class='newpage'>文章共1页 当前第1页<a><br/><hr />";
    }
}
/*按钮触发的换页动作依据nextpa()、prepa()、firstpa()、endpa()几个函数产生 */
function nextpa() {
    contpg++;
    pagese();
    content.innerHTML = cont[contpg];
    document.getElementById("nc_page").innerHTML = pagesel;

}
function prepa() {
    contpg--;
    pagese();
    content.innerHTML = cont[contpg];
    document.getElementById("nc_page").innerHTML = pagesel;
}
function firstpa() {
    contpg = 0;
    pagese();
    content.innerHTML = cont[contpg];
    document.getElementById("nc_page").innerHTML = pagesel;
}
function endpa() {
    contpg = cont.length - 1;
    pagese();
    content.innerHTML = cont[contpg];
    document.getElementById("nc_page").innerHTML = pagesel;
}

2.index.html

<div id="nc_con">
     //内容
</div>
<div id="nc_page">
    //分页操作按钮
</div>

<script type="text/javascript">
     initpg();
     searchpg();
</script>

备注：nc_page盒子不能在nc_con盒子中
转载：http://blog.csdn.net/li1325169021/article/details/53909418