Use jquery and PHP to refresh the content released by FCKeditor (ckeditor ).

FCKeditor is a WYSIWYG web editor that is often used as a background editor for publishing information. When the content to be released is very long, we need to consider the page display effect on the front end. This article will use jquery and combine PHP to pagination the content released by FCKeditor, in addition, the page can be switched without refreshing.

I don't want to talk about the use of FCKeditor. This document assumes that you are a web developer, have knowledge about jquery and PHP, and are familiar with the configuration and use of FCKeditor.

In the FCKeditor editor, a page break is inserted. Click this button to insert a page break in the content area, as marked in red:

The HTML code generated by the pagination operator is:

"/<div style=\"page-break-after: always;?\">\s*<span style=\"display: none;?\"> <\/span>\s*<\/div>/"  

The actual application scenario is as follows: the content published in The FCKeditor is submitted to the database in the background, and the published content is obtained by connecting to the database in PHP at the front end, and the long content is separated, and pagination.

PHP

PHP splits the content 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;     } } 

As you can see, $ pattern in the above Code is the paging code generated by the FCKeditor editor. Then, PHP compares the content using the preg_split () function and uses the separator as the demarcation point, divide the content into multiple pages and generate a paging navigation button. You only need to call pagebreak ($ content.

CSS

We use CSS to present the style of the paging button. Of course, you can modify these CSS to customize the appearance you want.

#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 #abcee4; background-color: #fff;color: #369;text-align: center;cursor: pointer;overflow: hidden;} #page_break .num li.on{background-color: #369;color: #fff;font-weight: bold;} 

Jquery

$ (Function () {$ ('# page_break. num Li: First '). addclass ('on'); $ ('# page_break. num li '). click (function () {// hide all page content $ ("# page_break Div [ID ^ = 'page _ ']"). hide (); // display the content 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 ');}});});

We use jquery to set the first page of the paging navigation button to the current status, and then click the paging button to switch the status of the button and display the content of the corresponding page.

By the way, the title of the article is about refreshing the content. In fact, this is not the refreshing effect of Ajax, but the display and hiding of the page content is controlled through jquery. The page content is read and loaded at a time.