Use the ckeditor paging tag to compile the paging function using JavaScript to pagination the article content.

When using the ckeditor text editor for the first time, we found that the "Paging" function (the paging button in the editor) actually only produces a div with a style in the text, no other content is provided. The format is as follows:

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

This may only be used for pagination during printing, and the page to be browsed may not be able to do so yet. So I want to design a function for paging here. You only need to select pagination in the editor. By observing the contained <span> with a default hidden style, I first thought about whether to write the article here, but thought about the convenience of string operations with JavaScript, so I want to use JavaScript to design a solution. The idea is to search for and record all the positions in the text that contain this label (<Div style = "Page-break-after: Always">), and trash the content into variables in Segments Based on the index location, the output page feed button calls the page feed function to perform page feed.

The variables used are:

VaR content = new object; var context = ""; // var pgindex = [] in HTML text; // store the array var cont = [] in the paging position; // store the part content var pagesel = ""; // when generating the page label, use VaR contpg = 0; // page number

Detailed code is encapsulated into several functions. initpg () is used to initialize and empty variables and search for tag locations:

Function initpg () {// set the null variable contpg = 0; pgindex. splice (0, pgindex. length); pgindex [0] = 0; Cont. splice (0, cont. length); pagesel = ""; // get the HTML text content of the node and search for the location where all paging labels appear. content = document. getelementbyid ("nc_con"); Context = content. innerhtml; var I = 0; var j = 1; var tmpp = 0; while (tmpp = context. indexof ("<Div style =" Page-break-after: Always ">", I) {If (tmpp! =-1) {pgindex [J ++] = tmpp; I = tmpp + 30; // 30 indicates to search again after the tag is searched, actually, the length of this label can be accurate} else {break ;}}

Searchpg () stores the content in segments into variables based on the index location and displays the first page as the initial content.

Searchpg () {If (pgindex. length> 1) {for (VAR I = 0; I <pgindex. length; I ++) {cont [I] = context. substring (pgindex [I], pgindex [I + 1]);} pagese (); content. innerhtml = cont [0]; document. getelementbyid ("nc_page "). innerhtml = pagesel; // The button Content Used for page feed is output under the id = nc_page element} elsepagese (); document. getelementbyid ("nc_page "). innerhtml = pagesel ;}

Pagese () determines the required control button option based on the current page number, that is, the content of pagesel. pagesel is used in searchpg.

Function pagese () {If (Cont. length> 0) {If (contpg = 0) {pagesel = "total articles" + Cont. length + "Page Current section" + (contpg + 1) + "page <br/> <HR/> first page previous page <a href = '# 'onclick = 'nextpa () '> next page </a> <a href =' # 'onclick = 'endpa () '> last page </a> ";} else if (contpg! = 0 & contpg <Cont. length-1) {pagesel = "total articles" + Cont. length + "Page Current section" + (contpg + 1) + "page <br/> <HR/> <a href = '# 'onclick =' firstpa () '> first page </a> <a href =' # 'onclick = 'prepa () '> previous page </a> <a href =' # 'onclick = 'nextpa () '> next page </a> <a href =' # 'onclick = 'endpa () '> last page </a> ";} else if (contpg = Cont. length-1) {pagesel = "total articles" + Cont. length + "Page Current section" + (contpg + 1) + "page <br/> <HR/> <a href = '# 'onclick =' firstpa () '> first page </a> <a href =' # 'onclick = 'prepa () '> previous page </a> next page ";}} else {pagesel = "Article total 1 Page Current 1st page <br/> <HR/> ";}}

The button-triggered page feed is generated based on nextpa (), Prepa (), firstpa (), and endpa () functions.

function nextpa(){contpg++;pagese();content.innerHTML=cont[contpg];document.getElementById("nc_page").innerHTML=pagesel;}function prepa(){contpg--;pagese();content.innerHTML=cont[contpg];document.getElementById("nc_page").innerHTML=pagesel;}function firstpa(){contpg=0;pagese();content.innerHTML=cont[contpg];document.getElementById("nc_page").innerHTML=pagesel;}function endpa(){contpg=cont.length-1;pagese();content.innerHTML=cont[contpg];document.getElementById("nc_page").innerHTML=pagesel;}

In this way, the general content is completed, and the call is at the bottom of the body content (or placed in the window. onload) first calls initpg () initialization, and then uses searchpg () to determine the page content and the page feed button.

<Div id = "nc_con"> // content </div> <Div id = "nc_page"> // pagination OPERATION button </div> <SCRIPT type = "text/JavaScript "> initpg (); searchpg (); </SCRIPT>

In actual use, it is found that both chrome and FF pass the test, but IE does not work. After careful test, it is found that the tags generated in different browsers are different (some IE are uppercase letters, and there are; and none; differences)

Part IE:

<DIV style="PAGE-BREAK-AFTER: always;"><SPAN style="DISPLAY: none;"> </SPAN></DIV>

Chrome, FF:

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

Therefore, the keyword is reduced to the non-containing semicolon and the browser is added to the header for judgment:

var Sys = {}; var ua = navigator.userAgent.toLowerCase(); if (window.ActiveXObject) Sys.ie = ua.match(/msie ([\d.]+)/)[1]

Modify initpg ():

function initpg(){contpg=0;pgindex.splice(0,pgindex.length);pgindex[0]=0;cont.splice(0,cont.length);pagesel="";content=document.getElementById("content");context=content.innerHTML;if(Sys.ie){var i=0;var j=1;var tmpp=0;while(tmpp=context.indexOf("<DIV style=\"PAGE-BREAK-AFTER: always",i)){if(tmpp!=-1){pgindex[j++]=tmpp;i=tmpp+30;}else{break;}}}else{var i=0;var j=1;var tmpp=0;while(tmpp=context.indexOf("<div style=\"page-break-after: always",i)){if(tmpp!=-1){pgindex[j++]=tmpp;i=tmpp+30;}else{break;}}}

In addition, this method can achieve non-Refresh page feed, but one factor to consider is the JS execution problem-if the Dom is not ready. For example, if the network speed affects incomplete page element loading and causes JS not to be executed (even if the code is put into window. onload ). In addition, if Ajax is used to asynchronously load content, you need to consider re-triggering the function. For example, you can add this paging function to the Ajax callback to empty the variable and execute it again. Therefore, this is only a solution made without reference to other materials. If you implement this function on the server script, it will achieve other results. We have the opportunity to consider using PHP for implementation.