【和我一起学jeesite】ckeditor对长文章进行分页显示-优快云博客

本文介绍了一种使用JavaScript实现的网页内容分页显示的方法。该方法通过分析文本内容并插入特定的分页标签来自动将长篇文章分成多个页面。支持不同浏览器环境，并提供了完整的分页导航功能。

在文章发布时，每次分页时添加点击一下分页按钮即可

js代码：

content为文本内容，div的id;

在页面加个分页的div id="nc_page"即可。


$(function(){
    initpg();
    searchpg();
})

var content=new Object;  
var context="";//HTML文本内容  
var pgindex=[];//存储分页位置的数组  
var cont=[];//存储分段内容  
var pagesel="";//生成分页标签时用  
var contpg=0;//页号  
var Sys = {};   
var ua = navigator.userAgent.toLowerCase();   
if (window.ActiveXObject)   
Sys.ie = ua.match(/msie ([\d.]+)/)[1] 

function initpg(){  
contpg=0;  
pgindex.splice(0,pgindex.length);  
pgindex[0]=0;  
cont.splice(0,cont.length);  
pagesel="";  
  
content=document.getElementById("content");  
context=content.innerHTML;  
  
if(Sys.ie){  
    var i=0;  
    var j=1;  
    var tmpp=0;  
    while(tmpp=context.indexOf("<DIV style=\"PAGE-BREAK-AFTER: always",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("<div style=\"page-break-after: always",i)){  
        if(tmpp!=-1){  
            pgindex[j++]=tmpp;  
            i=tmpp+30;  
        }else{  
            break;  
        }  
    }     
}
}

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;  
}  

function pagese(){  
    if(cont.length>0){  
        if(contpg==0){  
            pagesel="文章共"+cont.length+"页 当前第"+(contpg+1)+"页<br/><hr />首 页 上一页 <a href='#' onclick='nextpa()'>下一页</a>  <a href='#' onclick='endpa()'>末 页</a>";  
        }else if(contpg!=0&&contpg<cont.length-1){  
            pagesel="文章共"+cont.length+"页 当前第"+(contpg+1)+"页<br/><hr /><a href='#' onclick='firstpa()'>首 页</a> <a href='#' onclick='prepa()'>上一页</a>  <a href='#' onclick='nextpa()'>下一页</a> <a href='#' onclick='endpa()'>末 页</a>";  
        }else if(contpg==cont.length-1){  
            pagesel="文章共"+cont.length+"页 当前第"+(contpg+1)+"页<br/><hr /><a href='#' onclick='firstpa()'>首 页</a> <a href='#' onclick='prepa()'>上一页</a> 下一页 末 页";  
        }  
    }else {  
        pagesel="文章共1页 当前第1页<br/><hr />";  
    }  
}  

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;  
}

转载于:https://my.oschina.net/qiaojj/blog/703334