动易swCMS6.5网站的模板在线编辑功能模块

动易cms6.5网站的模板文件以文字内容方式保存在数据库中

其好处就是可以通过在线编辑方式修改模板文件,

而无需使用如DW网页制作工具来修改

模板内容读出后显示在网页模板的编辑器里,能够以可视化和代码方式进行编辑

该模板编辑器和HTML在线编辑器设计设计在一起,

通过给HTML在线编辑器的引用文件传递参数显示出模板编辑器的功能:

后台模板管理页Admin_Template.asp对模板编辑器的引用:

<iframe ID='editor' src='../editor.asp?ChannelID=0&ShowType=1&tContentid=EditorContent&TemplateType=1' frameborder='1' scrolling='no' width='790' height='400' ></iframe>

用户在本机测试时可通过:(若网站没有拒绝外部访问的话可以看到以下页面)

http://localhost/editor.asp 可查看HTML在线编辑器的风格;

http://localhost/editor.asp?ChannelID=0&ShowType=1&tContentid=EditorContent&TemplateType=1 可查看模板编辑器的风格

对比可以发现两者的主要区别就是模板编辑器多了各种“自定义动易标签的插入按钮”

例如:我们比较常用的以下动易标签插入按钮:

显示文章标题等信息的

显示图片文章的

显示幻灯片文章的

文章自定义列表的等标签插入按钮

所有“动易标签的插入按钮”点击后

会弹出该动易标签相关参数的设置页面

这些设置页面包含在JS的网页对话框中

“插入按钮”调用“设置页面”的代码设计如下:

在后台模板管理页Admin_Template.asp所调用的模板编辑器文件

editor.asp?ChannelID=0&ShowType=1&tContentid=EditorContent&TemplateType=1中:

<a href="javascript:SuperFunctionLabel('../Editor/editor_label.asp','GetArticleList','文章列表函数标签',1,'GetList',800,700,1)" >

<img src='../Editor/images/LabelIco/GetArticleList.gif' border='0' width='18' height='18' alt='显示文章标题等信息'>

</a>

GetArticleList.gif为插入“文章标题等信息”动易标签的图片按钮

该图片按钮通过调用一个JS函数,该函数的作用:给指定的ASP文件传递指定的参数

该JS函数SuperFunctionLabel()位于文件Admin_Template.asp中,详细代码如下:

Function SuperFunctionLabel(url,label,title,ModuleType,ChannelShowType,iwidth,iheight,TemplateType){

if (TemplateType==1){

form1.Content.focus();

}else{

form1.Content2.focus();

}

var str = document.selection.createRange();

var arr = showModalDialog(url+"?ChannelID=0&Action=Add&LabelName="+label+"&Title="+title+"&ModuleType="+ModuleType+"&ChannelShowType="+ChannelShowType+"&InsertTemplate=1", "", "dialogWidth:"+iwidth+"px; dialogHeight:"+iheight+"px; help: no; scroll:yes; status: yes");

if (arr != null){

str.text = arr;

}

}

当文件editor_label.asp获取了相关的参数后

由该文件的代码作出判断,决定该动易标签的设置页面

最后将该设置页面显示在相应大小的JS网页对话框中

在模板编辑器中还有一部分“动易标签插入”按钮是直接调用已有静态的设置页面

例如:插入网站LOGO的“网站logo”动易标签插入按钮

网站的banner插入按钮“网站banner”

网站的公告插入按钮“公告”等

其相应的设置页面分别是:

/Editor/Lable/PE_Logo.htm

/Editor/Lable/PE_Banner.htm

/Editor/Lable/PE_Annouce2.htm等

这些静态的设置页面存放在Editor/Lable中

对模板编辑器中这部分“动易标签插入”按钮引用的静态的设置页面

是在文件Editor.asp中对这些按钮进行了初始化,代码如下:

arrButtons(81) = "Btn$网站logo$FunctionLabel('" & InstallDir &"Editor/Lable/PE_Logo.htm','240','140')$LabelIco/PE_logo.gif"

arrButtons(82) = "Btn$网站banner$FunctionLabel('" & InstallDir &"Editor/Lable/PE_Banner.htm','240','140')$LabelIco/PE_banner.gif"

……

arrButtons(84) = "Btn$公告$FunctionLabel('" & InstallDir &"Editor/Lable/PE_Annouce2.htm','240','210')$LabelIco/PE_Annouce.gif"

对于所有编辑器中所有的按钮的相关参数都是用一个数组arrButtons()来存放的。

以上截取的代码只在说明编辑器的某部分功能

动易网站将模板编辑器与HTML在线编辑器的结合可以增加代码的重用性

该模块代码很复杂,有兴趣的朋友可主要浏览几个文件:

Editor.asp在线编辑器的调用页

Admin_Template.asp模板管理编辑页

editor_label.asp动易标签插入按钮的调用页,由此页判断生成该动易标签的设置页面

以及一个非常好的函数:

SuperFunctionLabel()

给指定的ASP文件传递指定的参数,

个人认为比较适合用于:“批量”对某个ASP文件进行相同的参数进行传递值