Php ckeditor article paging implementation method

Source: Internet
Author: User

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

The html code generated by the pagination operator is:

The code is as follows: Copy code

<Div style = "page-break-after: always"> <span style = "display: none"> </span> </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.

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, marked in red as follows:

The html code generated by the pagination operator is:

The code is as follows: Copy code

<Div style = "page-break-after: always"> <span style = "display: none"> </span> </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:

The code is as follows: Copy code

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> ";
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.

The code is as follows: Copy code

# 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

The code is as follows: Copy code
$ (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

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.