编辑器编辑文章实现分页功能

1、单靠纯粹的编辑器无法实现分页功能,还需要自己编写一些代码。以Ueditor编辑器为例,如下图

此处的分页标签点击之后,可以在文章你想要分页的地方注入一个标记一样的代码,查看源码可以看到:_ueditor_page_break_tag_ 这行代码,这个标记代码就是我们分页功能所要用到的重要字段。

2、实现分页的js代码:js下载链接

var Pages = 1;//总页数
var regExp = /_ueditor_page_break_tag_/;//根据某处字符来分页,这里用的是ueditor编辑器的分页标志
var saveContent;//用于保存分割出来的详情数组
var content, pageList;//保存全局ID

//调用开始,这里#content就是需要分页的详情部分,#page分页该放的选择点,分页样式
getPages("#content","#page");

function getPages(id,page) {
    content = $(id);
    pageList = $(page);
    if (content != null && regExp.test(content.html())) {
        saveContent = content.html().split(regExp);//根据分页的标示将html分割成数组
        Pages = saveContent.length;//计算出需要分几页
    }
    window.createPages(1);
};

//显示分页的内容并自动生成页数
function createPages(currentPage) {
    if (currentPage >= 1 && currentPage <= Pages && saveContent != null && saveContent.length >= 0) {
        var pageHtml = pageList;//分页的样式
        if ((parseInt(currentPage) - 1) <= saveContent.length) {
            content.html(saveContent[parseInt(currentPage) - 1]);//用获取详情数组指定下标部门代替原新闻内容,实现分页显示效果
        }
        pageHtml.html();//分页样式初始
      
        //模式一 :以 1、2、3、4.。。这种模式分页
        var innHtml = "<ul class='pagination'>";
        for(var i=1;i<=saveContent.length;i++){
            if(i==currentPage){
                innHtml +="<li class='active'><span>"+i+"</span></li>";
            }else{
                innHtml +="<li><a target='_self' href='javascript:createPages(" + i + ")'>"+i+"</a></li>";
            }
        }
        innHtml +="</ul>";
        
        //模式二:以首页、上一页、下一页、尾页
        //  var innHtml = "页数:" + currentPage + "/" + Pages;
        //innHtml += "<a target='_self' href='javascript:createPages(1)'>首页</a>";
        //if (currentPage > 1) {
        //    innHtml += "<a target='_self' href='javascript:createPages(" + (parseInt(currentPage) - 1) + ")'>上一页</a>";
        //}
        //if (currentPage < Pages) {
        //    innHtml += "<a target='_self' href='javascript:createPages(" + (parseInt(currentPage) + 1) + ")'>下一页</a>";
        //}
        //innHtml += "<a target='_self' href='javascript:createPages(" + Pages + ")'>末页</a>";
       
       pageHtml.html(innHtml);
    }
}

此方法的逻辑是将整篇文章取出后,通过js代码实现标记分割为数组,然后通过分页点击取数组指定内容,便可以感觉像分页一样,每次点击只看到指定页的内容。

如果大家有什么问题,可以留言给博主。你们的支持是我前进的动力,谢谢大家阅读!

1条评论

发表评论