KindEditor编辑器内容分页js

      在http://blog.csdn.net/as66t/article/details/8519687这个博客的参考下，进行一些浏览器兼容的小改动

      在初次使用kindEditor文本编辑器过程中发现，其中的“分页”功能（编辑器中的分页按钮）实际的作用只是在文中产生一个带样式的hr标签，并没有提供别的内容。形式如下：

       这也许只是用于打印时的分页，要实现浏览的分页可能还没这个能力。于是想在此上设计出一个功能来分页，用户只用在编辑器上选择分页即可。通过观察包含的<hr>带有默认隐藏样式，于是最初想到是否在此做文章，但又想到了用JavaScript的字符串操作非常方便，于是想选用javascript来设计一个解决方法。思想是：搜索并记录文中包含所有此标签的位置（<hr style="page-break-after: always;" class="ke-pagebreak">），按索引位置将内容分段截取存入变量，输出换页按钮，通过按钮调用换页函数进行换页。

一、以下为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("
    
    
", 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
    
    
     
     0){  
       if(contpg==0){  
                pagesel="
     
     "+"文章共"+cont.length+"页 当前第"+(contpg+1)+"页
     
     

     
     

     
     首 页 
     
     上一页 
     
     下一页  
     
     末 页";  
       }else if(contpg!=0&&contpg
     
     
      
      "+"文章共"+cont.length+"页 当前第"+(contpg+1)+"页
      
      

      
      

      
      首 页 
      
      上一页  
      
      下一页 
      
      末 页";  
       }else if(contpg==cont.length-1){  
                pagesel="
      
      "+"文章共"+cont.length+"页 当前第"+(contpg+1)+"页
      
      

      
      

      
      首 页 
      
      上一页 
      
      下一页 
      
      末 页";  
       }  
   }else {  
       pagesel=""; 
       //pagesel="
      
      文章共1页 当前第1页
      
      

       
       
";
   }  
} 
/*按钮触发的换页动作依据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;
    }

     
     
    
    

二、index.html文件

1. <div id="nc_con">
   
2.      
   
3.       //内容
   
4. 
   
5.  </div>
6. <div id="nc_page">
7. 
   
8.     //分页操作按钮
9. 
   
10. </div>
11. 
    
12. <script type="text/javascript">
13.      initpg();
    
14.      searchpg();
15. </script>