Continue to edit the content. This article is the last article in the editor. The first two articles are FCKeditor related knowledge, various common usage problems, and FCKeditor custom upload path configuration.ArticleThis section describes how to use FCKeditor to generate static paging HTML.
The following is what we will introduce:
1. generate static paging HTML Analysis
2. Specific implementation
1. generate static paging HTML Analysis
In the actual website development process, we always want to improve the website performance in various ways. The effective methods are cache, static Web pages, and asynchronous loading, today, we mainly discuss the generation of static pages.
There are many static pages on the general information website, because news and other information such as the time is relatively strong, generally generate a static page can be used all the time, to generate a static page, follow these two steps:
1. Create a static page template, and leave a placeholder for the content to be placed in the template, in order to easily replace the content (the overall article style and paging style should be taken into account when the template is created ).
2. Edit the content in the background Editor, fill the content in the template, and generate a static page under the specified directory.
Generally, generating static pages is not difficult. The main problem is the paging of static pages, because sometimes a news or article is too long to display the content on a page, in this case, you need to split the page into multiple pages for display. However, because a static page cannot be displayed as a dynamic page, therefore, you need to generate the pagination link in the static page when generating the page.
II. Specific implementation
Based on the above implementation analysis, we will first develop the template page to see the following template pageCode:
<Body> <div> <! -- Body --> {0} <br/> <! -- Page number --> {1} </div> </body>
We can see that I just created a simple template to store the body and page number. In actual development, the template must be much more complicated than this one. Here is just an implementation method, the specific details need to be improved by yourself.
The next step is an important background release page. For details, see the news \ template \ default. aspx page in the source code.
Note the following two points:
1. Because the published content may require pagination, a button is specially placed on my side to insert a pagination character (the pagination character is <pager>, this ensures that the paging character is special and cannot be repeated with normal HTML elements. Otherwise, the page will be divided incorrectly)
Page button JS Code:
Function addpage () {// get the FCKeditor object and its content var fck = fckeditorapi. getinstance ("fckeditor1"); var content = fck. editordocument. body. innerhtml; // obtain the pagination content of the cached article on the page, and decode the content uri (because the content contains Chinese characters) var allcontent = decodeuricomponent (document. getelementbyid ("<% = hfcontent. clientid %> "). value); // determines whether the paging content is undefined or empty if (allcontent! = Undefined | allcontent! = NULL) {allcontent + = content + "<pager>" ;}// put the paging content into the cached document. getelementbyid ("<% = hfcontent. clientid %> "). value = encodeuricomponent (allcontent); // clear the content fck in FCKeditor. editordocument. body. innerhtml = ""; // clear the page button list jquery ("# pagelist" ).html (""); // obtain the content of each page separated by VAR contentlist = allcontent. split ("<pager>"); // generate a list of corresponding paging buttons Based on the separated list, and add related viewing events for the buttons (VAR I = 0; I <contentlist. length; I ++) {var Pa Gebutton; if (I! = Contentlist. length-1) {pagebutton = "<SPAN class = 'pagelink 'onclick = 'getpage (" + I + ", this) '>" + (I + 1 ). tostring () + "</span> & nbsp ;";} else {pagebutton = "<SPAN class = 'pagelinkselected' onclick = 'getpage (" + I + ", this) '>" + (I + 1 ). tostring () + "</span> & nbsp;" ;}jquery (pagebutton ). appendto ("# pagelist ");}}2. Because FCKeditor is mainly responsible for page editing, I will cache the edited content of FCKeditor to hiddenfield on the page every time I click the page button (separated by pagination ), at the same time, the page number is dynamically generated through JS, And you can click the page number to view the original edited content in FCKeditor.
Get the JS Code of the page content:
// Obtain the page content based on the page ID function getpage (pageid, OBJ) {var contentlist = decodeuricomponent (document. getelementbyid ("<% = hfcontent. clientid %> "). value ). split ("<pager>"); var fck = fckeditorapi. getinstance ("fckeditor1"); If (contentlist [pageid] = undefined) {fck. editordocument. body. innerhtml = "";} else {fck. editordocument. body. innerhtml = contentlist [pageid];} // change the button itself to the selected style and change the style of other pagination buttons to the normal pagination style jquery (OBJ ). addclass ("pagelinkselected"); jquery (OBJ ). siblings (). removeclass ("pagelinkselected "). addclass ("pagelink ");}
Note that special characters may appear in the page content, therefore, when caching or retrieving the content of an article, I will use the two JS Methods encodeuricomponent and decodeuricomponent to encode and decode the content of the article.
The specific page is as follows:
I am only doing a functional demonstration here, so there is not much beautification on the interface, and the final confirmation button should be saved to the database in theory, on the other hand, I simply put the content into the session, while the publish button retrieves the content from the session and generates a static page.
There are two block codes in the code that generates static pages in the background:
1. Select a template as needed. The Code is as follows:
Private string [] gettemplatebyid (int id) {string [] srctempstringandextensionname = new string [2]; // template string and extension array. String templatefullpath = server. mappath ("~ /News/template/template2.html "); // full template path if (string. isnullorempty (templatefullpath) = false) // whether it is null {// return a fileinfo object in the full template path. Fileinfo = new fileinfo (templatefullpath); string root = "http: //" + request. servervariables ["http_host"] + this. resolveurl ("~ /News/template/template2.html "); httpwebrequest myreq = (httpwebrequest) webrequest. create (Root); httpwebresponse response = (httpwebresponse) myreq. getresponse (); stream receivestream = response. getresponsestream (); streamreader readstream = new streamreader (receivestream, system. text. encoding. utf8); srctempstringandextensionname [0] = readstream. readtoend (); srctempstringandextensionname [1] = fileinfo. extension. trim ();} else {srctempstringandextensionname = NULL;} return srctempstringandextensionname ;}In my case, the template is obtained from the specified directory. In actual development, this template may be obtained from the database or from the specified directory.
2. During the page generation process, you need to determine the number of pages in the news article. If there is only one page, the page can be generated based on the specified name, if there are multiple pages, you need to specify a special rule generation page. The rule generated here is the name specified on the first page, the following page is added with the "_ serial number" after the specified name. Because the generated code is long, I will not post it in this article. You can directly download the source code to view it.
The content of this edit article is all over. If there is anything wrong with this article, please point it out. Thank you!
Source code download: Click here to download (you can directly browse the website news \ template \ default. aspx)
In other words, if you think this article is useful or valuable, move the cursor over [recommendation] and click it for me. Thank you very much!
Records of various problems encountered during the project process
Editor:
FCKeditor related knowledge and various common usage Problems
FCKeditor custom upload path Configuration
Use FCKeditor to generate static paging html
Chart:
Tips on mschart
Good chart selection on ASP.net-funsioncharts
Orm:
Some minor issues with using nhib.pdf to configure object entities
About Nhibernate query Encapsulation
Deployment:
Problems related to project deployment-IIS
The tangled problems during project deployment-sqlserver
Tools:
. Net tool library frequently used for development
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
