[项目过程中所遇到的各种问题记录]编辑器篇——使用FCKeditor生成静态分页HTML

继续编辑篇的内容，本文是编辑器篇的最后一篇，前面2篇分别是FCKeditor相关知识及各种常见使用问题和FCKeditor自定义上传路径配置，今天这篇文章主要是介绍如何使用fckeditor来生成静态分页HTML。

以下是本文所要介绍的内容：

1、生成静态化分页HTML分析

2、具体实现

一、生成静态化分页HTML分析

在实际的网站开发过程中，我们总是想通过各种方式提高网站的性能，其中比较有效的方式就是：缓存、网页静态化、异步加载等等，今天这边主要讨论的是静态化页面的生成。

在一般的资讯网站上使用静态化的页面比较多，因为像新闻等资讯时效性比较强，一般生成了一个静态页面就可以一直使用，而需要生成静态页面一般分为以下2个步骤：

1、制定好静态化页面的模板，在模板中需要将需要放内容的地方留好占位符，以方便将内容替换进去（制定模板的时候需要考虑好整体文章的样式、分页的样式等）。

2、在后台编辑器中将内容编辑好，然后将内容填充到模板当中并在指定目录下生成静态页面。

一般来说，生成静态化页面没什么难度，主要麻烦的就是静态化页面的分页，因为有时候一篇新闻或者文章过长不可能将内容都放在一个页面里呈现，这时就需要将页面进行分割，分成多个页面来展示，但是由于是静态页面无法像动态页面那样放个控件就实现分页，所以需要在生成页面的时候就将分页的链接生成在静态页面中。

二、具体实现

根据上面的实现分析，我们首先来制定下模板页面，看下面的模板页面代码：

可以看到我这边仅仅就是做了个简单的模板，就存放正文和页码，实际开发过程中，模板肯定比这个复杂多了，这边仅仅是给出个实现方法，具体的细节需要自己去完善。

接下来就是重要的后台发布页面了，具体可看源码中：news\template\Default.aspx页面。

其中有2点需要注意：

1、因为考虑到发布的内容可能需要分页，所以我这边的专门放了一个按钮是用来插入分页符的（分页符为<pager>，这样可以保证这个分页符是特殊的，不能和正常的HTML元素重复，否则分页会分错）

分页按钮JS代码：

view source

print ?

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 = "<span class='pagelink' onclick='GetPage(" + i + ",this)'>" + (i + 1).toString() + "</span>  ";

25         } else {

26             pagebutton = "<span class='pagelinkselected' onclick='GetPage(" + i + ",this)'>" + (i + 1).toString() + "</span>  ";

27         }

28         jQuery(pagebutton).appendTo("#pagelist");

29     }

30 }

2、由于fckeditor主要承担着页面编辑的功能，而每次点击分页按钮我都会将fckeditor编辑的内容缓存到页面中的HiddenField中（以分页符分割），同时通过JS动态生成分页页码，并且可以通过点击页码在fckeditor中查看原来编辑的内容。

获取页面内容JS代码：

view source

print ?

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 }

这边需要注意的是由于页面内容中可能会出现特殊的字符，所以我这边在缓存或获取文章内容的时候都会通过encodeURIComponent和decodeURIComponent这2个JS方法来对文章内容进行编码和解码。

具体页面截图如下：

我这边仅仅是做功能演示，所以界面上没有做过多的美化，而且最终确认按钮点击理论上应该是保存到数据库中，而我这边就简化了将内容放入session中，而发布按钮则是从session中获取内容然后生成静态页面。

在后台生成静态页面的代码中有块代码还是2个比较重要的：

1、就是根据需求选择模板，代码如下：

view source

print ?

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         FileInfo fileInfo = new FileInfo(templateFullPath);

09

10         string root = "http://" + Request.ServerVariables["HTTP_HOST"] +

11             this.ResolveUrl("~/news/template/Template2.html");

12         HttpWebRequest myReq = (HttpWebRequest)WebRequest.Create(root);

13         HttpWebResponse response = (HttpWebResponse)myReq.GetResponse();

14

15         Stream receiveStream = response.GetResponseStream();

16         StreamReader readStream = 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、在生成页面的过程中，需要判断下这个资讯文章到底有几页，如果只有一页可以就根据指定的命名生成页面，而如果有多页则还需指定特殊的规则生成页面，我这边生成的规则是第一页为指定名称，后面的页面则在指定名称后加上“_序号”这种形式，由于生成的代码较长本文中我就不贴出来了，可以直接下载源码查看。

到此编辑篇的内容就全部结束了，如果文章中有任何不对，欢迎指出，谢谢了！

源码下载：点我下载（直接浏览网站news\Template\Default.aspx既可）

话说，各位看过的朋友如果觉得本文对您还有点用，或者觉得本文还有价值的话，麻烦将鼠标移到【推荐】上，帮我点击下，非常非常的感谢!

项目过程中所遇到的各种问题记录

编辑器篇：

FCKeditor相关知识及各种常见使用问题

FCKeditor自定义上传路径配置

使用FCKeditor生成静态分页HTML

图表篇：

有关MSChart的一些小技巧

asp.net上不错的图表选择—FunsionCharts

ORM篇：

使用NHibernate配置对象实体的一些小问题

有关NHibernate查询封装

作者： kyo-yo
出处： http://kyo-yo.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
2010中国十大杰出IT博客大赛
我的参赛主页：点我进入
大家如果有闲票就投一下吧，拜谢了！

Tag标签: javascript, fckeditor, 项目过程中所遇到的各种问题记录, 静态化分页

顾磊(kyo-yo)
关注 - 7
粉丝 - 118

荣誉：微软社区精英，推荐博客

关注博主

« 上一篇： [项目过程中所遇到的各种问题记录]编辑器篇——FCKeditor自定义上传路径配置
» 下一篇： [项目过程中所遇到的各种问题记录]图表篇——有关MSChart的一些小技巧

posted @ 2010-12-17 09:39 顾磊(kyo-yo) 阅读(1613) 评论(7) 编辑收藏所属分类: [01].NET, [02]C#, [06]程序杂谈

[项目过程中所遇到的各种问题记录]编辑器篇——使用FCKeditor生成静态分页HTML

[项目过程中所遇到的各种问题记录]编辑器篇——使用FCKeditor生成静态分页HTML

你可能感兴趣的:(JavaScript,fckeditor,项目过程中所遇到的各种问题记录,静态化分页)