CKEditor或者FCKEditor编辑器的分页处理

CKEditor就是FCKEditor的改名版本，呵呵。基于javascript的前端HTML编辑器，一般做内容管理系统的基本都用过这个编辑器，很强大很方便。

做内容管理某个内容可能文字会很多，分开发表的话不方便维护管理，一般就是直接使用CKEditor的分页功能，说白了这个无非就是类似下面的一段HTML代码：

如果要想在前台输出的时候分页是做不到的。我一般会有两种方式进行处理：

1.利用服务端在输出到页面前进行分页。

2.利用前端javascript直接进行分页。

习惯上我比较喜欢第一种，呵呵。第二种在目前的项目中准备要用到。

先说第一种方式，其实就是利用PHP将CKEditor的分页代码替换为某个标识符，然后进行下一步处理。

比如，利用正则将分页代码替换为“<!–/*page-breaker*/–>”

<?php
$content = preg_replace('/<div\s*style\s*=\s*"page-break-after\s*:\s*always\s*;\s*"[^<\/div>]*>\s*<span\s*style\s*=\s*"\s*display\s*:\s*none\s*;\s*"\s*[^<\/span>]*>(.+)<\/span>\s*<\/div>/iUs',"<!--/*page-breaker*/-->",$content);
?>

这样就将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, 开发, 正则