CKEditor就是FCKEditor的改名版本,呵呵。基于javascript的前端HTML编辑器,一般做内容管理系统的基本都用过这个编辑器,很强大很方便。
做内容管理某个内容可能文字会很多,分开发表的话不方便维护管理,一般就是直接使用CKEditor的分页功能,说白了这个无非就是类似下面的一段HTML代码:
如果要想在前台输出的时候分页是做不到的。我一般会有两种方式进行处理:
1.利用服务端在输出到页面前进行分页。
2.利用前端javascript直接进行分页。
习惯上我比较喜欢第一种,呵呵。第二种在目前的项目中准备要用到。
先说第一种方式,其实就是利用PHP将CKEditor的分页代码替换为某个标识符,然后进行下一步处理。
比如,利用正则将分页代码替换为“”
$content = preg_replace('/
?>
这样就将HTML的分页代码替换为一个常规的字符串。然后利用explode函数重组为数组进行分页处理。当然,如果喜欢可以每次都使用正则直接输出一个数组^_^
第二种方式,是参考别人利用jQuery写的:http://www.blogjava.net/haha1903/archive/2010/06/23/324223.html,暂时没使用过,记下来备用吧,呵呵。
$(function() {
var top = "#content";
var content = $(top);
var all = content.find("*");
var pages = [];
function hideContent() {
all.hide();
}
function showArray(arr) {
$.each(arr, function(i) {
this.show().parentsUntil(top).show();
});
}
function initPages(pageBreaks) {
pageBreaks.each(function(index) {
$(this).attr("id", "pageBreak" + index);
});
var current = 0;
pages[0] = [];
all.each(function(i) {
var id = $(this).attr("id");
if(id == "pageBreak" + current) {
current++;
pages[current] = [];
} else {
pages[current].push($(this));
}
});
}
function showPage(i) {
hideContent();
showArray(pages[i]);
}
var pageBreaks = content.find("div[style]").filter(function() {
return $(this).css("page-break-after") == "always";
});
if(pageBreaks.size() > 0) {
initPages(pageBreaks);
$("#pagingBar").pagination(pages.length, {
callback: function(index) {
showPage(index);
},
prev_text: '
next_text: '>',
items_per_page: 1,
num_display_entries: 5,
num_edge_entries: 2
});
showPage(0);
}
$("#content").show();
});
标签:CKEditor, FCKEditor, HTML, Javascript, jQuery, 开发, 正则