您当前的位置: 首页 >  编辑器

小志的博客

暂无认证

  • 0浏览

    0关注

    1217博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

KindEditor编辑器内容分页js

小志的博客 发布时间:2016-12-28 16:06:28 ,浏览量:0

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

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

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

一、以下为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.      
  2.       //内容
  3.  
  4.     //分页操作按钮
  5.      initpg();
  6.      searchpg();

关注
打赏
1661269038
查看更多评论
立即登录/注册

微信扫码登录

0.0423s