FCKEditor+jQuery+PHP实现分页代码

一、插入新闻

FCKEditor，作为一款经典的即插即用Web编辑器，在PHP、ASP、Ja va等环境下都表现得很稳定。这次要聊的，是借助它的“插入分页符”功能，来实现页面无刷新分页的效果。简单来说，就是在编辑新闻内容时，在需要分段的地方手动插入一个分页符，保存后，前端就能自动把长文章拆成几页来展示。

实际操作中，你只需要在编辑器的工具栏里找到那个“分页符”按钮，在正文的合适位置点一下，剩下的工作就交给后台代码了。

二、读取新闻

读取新闻数据时，核心在于对字段内容进行切片处理。下面这段PHP函数，就是用来干这个活的——它会根据分页符标记，把长字符串拆成数组，然后动态生成分页导航。

复制代码

function pageBreak($content)  
{  
    $content = $content;  
    $pattern = "/
 <\/p><\/div>/";  
    $strSplit = preg_split($pattern, $content, -1, PREG_SPLIT_NO_EMPTY);  
    $count = count($strSplit);  
    $outStr = "";  
    $i = 1;  

    if ($count > 1 ) {  
        $outStr = "
";  
        foreach($strSplit as $value) {  
            if ($i <= 1) {  
                $outStr .= "
$value
";  
            } else {  
                $outStr .= "
$value
";  
            }  
            $i++;  
        }  

        $outStr .= "
";  
        for ($i = 1; $i <= $count; $i++) {  
            $outStr .= "
$i
";  
        }  
        $outStr .= "
";  
        return $outStr;  
    } else {  
        return $content;  
    }  
}

这个函数做的事情很直观：先用正则匹配到分页符标记，然后按标记分割内容。如果只有一页，直接返回原内容；如果多页，则生成一个包含所有分页div的容器，第一页默认显示，其余页用CSS隐藏，最后再生成一个页码列表。

接下来说说CSS样式。分页导航的样式可以自由定制，这里给出一个简单但实用的方案——页码按钮使用橙色边框，当前页高亮显示。

复制代码

#page_break {  
}  
#page_break .collapse {  
    display: none;  
}  
#page_break .num {  
    padding: 10px 0;  
    text-align: center;  
}  
#page_break .num li{  
    display: inline;  
    margin: 0 2px;  
    padding: 3px 5px;  
    border: 1px solid #FF7300;  
    background-color: #fff;  
    color: #FF7300;  
    text-align: center;  
    cursor: pointer;  
    font-family: Arial;  
    font-size: 12px;  
    overflow: hidden;  
}  
#page_break .num li.on{  
    background-color: #FF7300;  
    color: #fff;  
    font-weight: bold;  
}

注意，这里用了一个 .collapse 类来隐藏非当前页，初始时只有第一页显示，其他页都不可见。

最后，jQuery代码负责把页码点击和页面切换串联起来。逻辑很简单：点击某个页码时，先隐藏所有分页内容，再显示对应的那一页，同时给当前页码添加高亮样式。

复制代码

$(document).ready(function(){  
    $('#page_break .num li:first').addClass('on');  

    $('#page_break .num li').click(function(){  
        //隐藏所有页内容  
        $("#page_break div[id^='page_']").hide();  

        //显示当前页内容。  
        if ($(this).hasClass('on')) {  
            $('#page_break #page_' + $(this).text()).show();  
        } else {  
            $('#page_break .num li').removeClass('on');  
            $(this).addClass('on');  
            $('#page_break #page_' + $(this).text()).fadeIn('normal');  
        }  
    });  
});

根据以上步骤，把FCKEditor、jQuery和PHP这三个组件组合起来，就能实现一个干净的无刷新分页功能。实际项目中，这种方案既轻量又稳定，对于内容管理类的站点来说非常实用。