FCKEditor+jQuery+PHP实现分页代码

所属分类: 网络编程 / 网页编辑器 阅读数: 1448
收藏 0 赞 0 分享
一、插入新闻

FCKEditor是一款很流行的即插即用WEB编辑器,它支持ASP、PHP、Java等语言。这里要介绍的是利用编辑器的“插入分页符”功能,实现页面的无刷新分页。

编辑新闻时,在需要插入分页的段落处插入分页符,保存即可。

二、读取新闻

在读取新闻字段时,通过PHP分页函数对新闻字段数据进行处理,代码如下:
复制代码 代码如下:

function pageBreak($content)
{
$content = $content;
$pattern = "/<div style=\"page-break-after: always\"><span style=\"display: none\">&nbsp;<\/span><\/div>/";
$strSplit = preg_split($pattern, $content, -1, PREG_SPLIT_NO_EMPTY);
$count = count($strSplit);
$outStr = "";
$i = 1;

if ($count > 1 ) {
$outStr = "<div id='page_break'>";
foreach($strSplit as $value) {
if ($i <= 1) {
$outStr .= "<div id='page_$i'>$value</div>";
} else {
$outStr .= "<div id='page_$i' class='collapse'>$value</div>";
}
$i++;
}

$outStr .= "<div class='num'>";
for ($i = 1; $i <= $count; $i++) {
$outStr .= "<li>$i</li>";
}
$outStr .= "</div></div>";
return $outStr;
} else {
return $content;
}
}

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

使用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实现无刷新页面分页。
更多精彩内容其他人还在看

为SyntaxHighlighter添加新语言的方法

因为经常要在博客里贴一些Lua代码,但是所使用的SyntaxHighlighter插件默认不支持Lua语言,所以去研究了一下如何为SyntaxHighlighter添加并激活一个新的语言,这里将过程和有同样需求的童鞋分享
收藏 0 赞 0 分享

syntaxhighlighter 去掉右上角问号图标的三种方法

syntaxhighlighter可以高亮着色显示几乎所有语言形式的源代码,还可以显示行号,是一款深受网站建设人员喜爱的工具,并且它还是免费的
收藏 0 赞 0 分享

百度编辑器ueditor前台代码高亮无法自动换行解决方法

这两天本站成功安装整合了百度编辑器ueditor,用着还挺不错,但是遇到了点小问题
收藏 0 赞 0 分享

FCKeditor 在chrome中不显示问题

今天在使用chrome打开后台的时候,发现FCKeditor编辑器菜单等都不显示,chrome确实不适合后台使用,以后还是继续ie核心的吧
收藏 0 赞 0 分享

ie9后浏览器fckeditor无法上传图片、弹出浮层内容不显示的解决方法

升级到IE9后,fckeditor在IE9里的弹出浮动层会出现bug,里面的内容不会出现。原因是IE9不支持var $=document.getElementById;这样的写法了
收藏 0 赞 0 分享

FCKeditor编辑器添加图片上传功能及图片路径问题解决方法

现在很多CMS系统因为安全原因会把后台编辑器里的上传功能给去除,但这样一来对实际使用过程造成了很多麻烦,今天我们以ASPCMS系统的FCKeditor编辑器为例,说明一下如何增加图片上传功能
收藏 0 赞 0 分享

CKEditor/FCKEditor 使用FCKeditor 2.6.5 快速使用教程(含插入图片)

CKEditor 是著名的 HTML 编辑器,IBM、Oracle、Adobe 等都在用。CKEditor 创建于 2003 年,其前身为 FCKEditor,在 2009 年的时候把“F”去掉了,更名为 CKEditor。
收藏 0 赞 0 分享

CKEditor/FCKEditor 使用 CKeditor 3.0.1 快速使用教程(含插入图片)

一般来说,我们在编辑内容时,先是读入到 textarea,再将 textarea 的内容赋给编辑器。
收藏 0 赞 0 分享

FCKEditor 自定义用户目录的修改步骤 (附源码)

FCKEditor 自定义用户目录的修改步骤 (附源码) ,需要的朋友可以参考下。
收藏 0 赞 0 分享

FCKeidtor 清除编辑器内容的代码

FCKeidtor清除编辑器内容的代码,需要的朋友可以参考下。
收藏 0 赞 0 分享
查看更多