fckeditor+jquery+php Implementation Pagination Code _ Web page Editor

First, insert the news

FCKeditor is a popular Plug and Play Web editor that supports languages such as ASP, PHP, Java, and so on. Here is to take advantage of the editor's "Insert Page break" feature, to achieve a page without refreshing paging.

When you edit the news, insert a page break in the paragraph where you want to insert the pagination, and save it.

Second, read the news

When reading a news field, the News field data is processed through the PHP paging function, as follows:

Copy Code code as follows:

function PageBreak ($content)
{
$content = $content;
$pattern = "/<div style=\" page-break-after:always\ "><span style=\" display:none\ "> <\/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;
}
}

The CSS style controls the pagination style, as follows:

Copy Code code as follows:

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

Using jquery code to implement pagination, the code is as follows:

Copy Code code as follows:

$ (document). Ready (function () {
$ (' #page_break. Num li:first '). addclass (' on ');

$ (' #page_break. Num li '). Click (function () {
Hide All Page content
$ ("#page_break div[id^= ' Page_ ']"). Hide ();

Displays the contents of the current page.
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 ');
}
});
});

Based on the above steps, you can implement the fckeditor+jquery+php page paging using the.