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