ueditor 长文章分页

最基础的长文章分页虽然很简单，但一直没有去实践，最近没什么事情便捣鼓了一把

其实也没有说亲自去写每一行代码，网上搜索了一把，看中一哥们的一篇文章，便拿过来改吧改吧，因为是事后很久才写这个笔记，所以记不住那个文章的链接了，在此也正式的说声：抱歉，兄弟！

长文章分页常见的有两种方式，一种是通过js,另一种是结合后台程序，根据长度做截取，但因为html标签在截取的时候容易出现标签没有闭合的情况，而要解决这个问题就需要用正则去匹配，比较麻烦，个人比较喜欢第一种，方便实用 而且可控性、灵活性比较高，当然缺陷就是小编估计不干了，每篇文章都得手动的去插入分隔符；

长文章分页的关键点：分页符  比如ueditor的 _ueditor_page_break_tag_

两个js函数 split 和 test

 

下面上代码

<span style="font-size:14px;"><script type="text/javascript">
	var pageCount = 1;//总页数
	var regExp = /_ueditor_page_break_tag_/;//根据某处字符来分页
	var saveContent;//用于保存分页数据
	var content, pageList;//保存全局ID
	
	$(document).ready(function(){
		UeInitialize("#content-box","#page");
	});
	UeInitialize = function (id,page) {
		var cTxt = $(id).html();
		content = $(id);
		pageList = $(page);
		if (cTxt != null && regExp.test(cTxt)) {
		
			saveContent = cTxt.split(regExp);
			
			pageCount = saveContent.length;
			
		}
		window.UePageContent(1);
	};
	
	UePageContent = function (pageIndex) {
    if (pageIndex >= 1 && pageIndex <= pageCount && saveContent != null && saveContent.length >= 0) {
        var pageHtml = pageList;
        if ((parseInt(pageIndex) - 1) <= saveContent.length) {
            content.html(saveContent[parseInt(pageIndex) - 1]);
        }

        pageHtml.html("");
        var innHtml = "页数：" + pageIndex + "/" + pageCount;
        innHtml += "<a target='_self' href='javascript:UePageContent(1)'>首页</a>";
        if (pageIndex > 1) {
            innHtml += "<a target='_self' href='javascript:UePageContent(" + (parseInt(pageIndex) - 1) + ")'>上一页</a>";
        }
        if (pageIndex < pageCount) {
            innHtml += "<a target='_self' href='javascript:UePageContent(" + (parseInt(pageIndex) + 1) + ")'>下一页</a>";
        }
        innHtml += "<a target='_self' href='javascript:UePageContent(" + pageCount + ")'>末页</a>";
        pageHtml.html(innHtml);
    }
}
</script></span>

内容和分页容器

<span style="font-size:14px;"><div id="content-box">
 {$ainfo.content} //长文章内容
 </div>
 <div id="page"></div></span>

如此这般便可以实现一个简单的长文章分页了，当然分页条部分你可以根据自己的需求去修改 比如根据分页数去做一个循环，显示成1 2 3 4 这种形式的