[项目过程中所遇到的各种问题记录]编辑器篇——使用FCKeditor生成静态分页HTML
2010-12-23 12:36
861 查看
[项目过程中所遇到的各种问题记录]编辑器篇——使用FCKeditor生成静态分页HTML
继续编辑篇的内容,本文是编辑器篇的最后一篇,前面2篇分别是以下是本文所要介绍的内容:
1、生成静态化分页HTML分析
2、具体实现
一、生成静态化分页HTML分析
在实际的网站开发过程中,我们总是想通过各种方式提高网站的性能,其中比较有效的方式就是:缓存、网页静态化、异步加载等等,今天这边主要讨论的是静态化页面的生成。
在一般的资讯网站上使用静态化的页面比较多,因为像新闻等资讯时效性比较强,一般生成了一个静态页面就可以一直使用,而需要生成静态页面一般分为以下2个步骤:
1、制定好静态化页面的模板,在模板中需要将需要放内容的地方留好占位符,以方便将内容替换进去(制定模板的时候需要考虑好整体文章的样式、分页的样式等)。
2、在后台编辑器中将内容编辑好,然后将内容填充到模板当中并在指定目录下生成静态页面。
一般来说,生成静态化页面没什么难度,主要麻烦的就是静态化页面的分页,因为有时候一篇新闻或者文章过长不可能将内容都放在一个页面里呈现,这时就需要将页面进行分割,分成多个页面来展示,但是由于是静态页面无法像动态页面那样放个控件就实现分页,所以需要在生成页面的时候就将分页的链接生成在静态页面中。
二、具体实现
根据上面的实现分析,我们首先来制定下模板页面,看下面的模板页面代码:
1 | < body > |
2 | < div > |
3 | <!--正文--> |
4 | {0} |
5 | < br /> |
6 | <!--页码--> |
7 | {1} |
8 | </ div > |
9 | </ body > |
接下来就是重要的后台发布页面了,具体可看源码中:news\template\Default.aspx页面。
其中有2点需要注意:
1、因为考虑到发布的内容可能需要分页,所以我这边的专门放了一个按钮是用来插入分页符的(分页符为<pager>,这样可以保证这个分页符是特殊的,不能和正常的HTML元素重复,否则分页会分错)
分页按钮JS代码:
01 | function AddPage(){ |
02 | //获取FCKeditor对象及其内容 |
03 | var fck=FCKeditorAPI.GetInstance( "FCKeditor1" ); |
04 | var content=fck.EditorDocument.body.innerHTML; |
05 |
06 | //获取页面缓存的文章分页内容,同时需要将内容URI解码(由于内容中会有汉字) |
07 | var allContent=decodeURIComponent(document.getElementById( "<%=hfContent.ClientID%>" ).value); |
08 | //判断分页内容是不是未定义或空 |
09 | if (allContent!=undefined||allContent!= null ){ |
10 | allContent+=content+ "<pager>" ; |
11 | } |
12 | //将分页内容放入缓存 |
13 | document.getElementById( "<%=hfContent.ClientID%>" ).value=encodeURIComponent(allContent); |
14 | //清空FCKeditor中内容 |
15 | fck.EditorDocument.body.innerHTML= "" ; |
16 | //清空分页按钮列表 |
17 | jQuery( "#pagelist" ).html( "" ); |
18 | //分隔获取每个分页内容 |
19 | var contentList=allContent.split( "<pager>" ); |
20 | //根据分隔出来的列表进行生成相应的分页按钮列表,同时为按钮添加相关查看事件 |
21 | for ( var i=0;i<contentList.length;i++){ |
22 | var pagebutton; |
23 | if (i!=contentList.length-1){ |
24 | pagebutton= "<spanclass='pagelink'onclick='GetPage(" +i+ ",this)'>" +(i+1).toString()+ "</span> " ; |
25 | } else { |
26 | pagebutton= "<spanclass='pagelinkselected'onclick='GetPage(" +i+ ",this)'>" +(i+1).toString()+ "</span> " ; |
27 | } |
28 | jQuery(pagebutton).appendTo( "#pagelist" ); |
29 | } |
30 | } |
获取页面内容JS代码:
01 | //根据页面ID获取该页面内容 |
02 | function GetPage(pageId,obj){ |
03 | var contentList=decodeURIComponent(document.getElementById( "<%=hfContent.ClientID%>" ).value).split( "<pager>" ); |
04 | var fck=FCKeditorAPI.GetInstance( "FCKeditor1" ); |
05 | if (contentList[pageId]==undefined){ |
06 | fck.EditorDocument.body.innerHTML= "" ; |
07 | } else { |
08 | fck.EditorDocument.body.innerHTML=contentList[pageId]; |
09 | } |
10 |
11 | //更改按钮自身为选中样式,并将其他分页按钮样式更改为普通分页样式 |
12 | jQuery(obj).addClass( "pagelinkselected" ); |
13 | jQuery(obj).siblings().removeClass( "pagelinkselected" ).addClass( "pagelink" ); |
14 | } |
具体页面截图如下:
我这边仅仅是做功能演示,所以界面上没有做过多的美化,而且最终确认按钮点击理论上应该是保存到数据库中,而我这边就简化了将内容放入session中,而发布按钮则是从session中获取内容然后生成静态页面。
在后台生成静态页面的代码中有块代码还是2个比较重要的:
1、就是根据需求选择模板,代码如下:
01 | private string []GetTemplateById( int id) |
02 | { |
03 | string []srcTempStringAndextensionName= new string [2]; //模板字符串和扩展名数组。 |
04 | string templateFullPath=Server.MapPath( "~/news/template/Template2.html" ); //模板全路径 |
05 | if (String.IsNullOrEmpty(templateFullPath)== false ) //是否为空 |
06 | { |
07 | //返回一个以模板全路径的FileInfo对象。 |
08 | FileInfofileInfo= new FileInfo(templateFullPath); |
09 |
10 | string root= " +Request.ServerVariables[ "HTTP_HOST" ]+ |
11 | this .ResolveUrl( "~/news/template/Template2.html" ); |
12 | HttpWebRequestmyReq=(HttpWebRequest)WebRequest.Create(root); |
13 | HttpWebResponseresponse=(HttpWebResponse)myReq.GetResponse(); |
14 |
15 | StreamreceiveStream=response.GetResponseStream(); |
16 | StreamReaderreadStream= new StreamReader(receiveStream,System.Text.Encoding.UTF8); |
17 |
18 | srcTempStringAndextensionName[0]=readStream.ReadToEnd(); |
19 |
20 | srcTempStringAndextensionName[1]=fileInfo.Extension.Trim(); |
21 | } |
22 | else |
23 | { |
24 | srcTempStringAndextensionName= null ; |
25 | } |
26 |
27 | return srcTempStringAndextensionName; |
28 | } |
2、在生成页面的过程中,需要判断下这个资讯文章到底有几页,如果只有一页可以就根据指定的命名生成页面,而如果有多页则还需指定特殊的规则生成页面,我这边生成的规则是第一页为指定名称,后面的页面则在指定名称后加上“_序号”这种形式,由于生成的代码较长本文中我就不贴出来了,可以直接下载源码查看。
到此编辑篇的内容就全部结束了,如果文章中有任何不对,欢迎指出,谢谢了!
源码下载:
话说,各位看过的朋友如果觉得本文对您还有点用,或者觉得本文还有价值的话,麻烦将鼠标移到【推荐】上,帮我点击下,非常非常的感谢!
项目过程中所遇到的各种问题记录
编辑器篇:
图表篇:
ORM篇: