学习笔记

FCK编辑器使用手册

有感于phpcms2008编辑器。

很多东西要自己定制才好一点。

———————————————

FckEditor配置手册中文教程详细说明
性能
首先,FCKEDITOR的性能是非常好的,用户只需很少的时间就可以载入 FCKEDITOR所需文件.对于其他在线编辑器来说,这几乎是个很难解决的难题,因为在开启编辑器时需要装载太多的文件.比如CUTEEDITOR,虽 然功能比FCKEDITOR还要强大,可是,它本身也够庞大了,至于FREETEXTBOX等,其易用性与FCKEDITOR相比,尚有差距,可以 说,FCKEDITOR是一个别具匠心的在线编辑器,它里面融入了作者高深的面向对象的JAVASCRIPT功力,集易用性与强大的功能与一体.

.与编辑器相关的所有图像,脚本以及调用页
.语言文件
.编辑器的皮肤文件
.工具样的贴图等
这些将导致在服务器和客户端间产生相当的流量.如果有许多文件被调用,那么即便每个文件很小.也会让用户等得不耐烦.
装载顺序
从2.0版开始,编辑器按以下步骤装载资源:
.基本页(就是编辑器所在页)以及装入编辑器的JS脚本
.用来建立编辑器的脚本
.编辑器的语言和皮肤.
.建立编辑器.
.载入预置的编辑文档内容.
.从现在开始,用户可以阅读和编辑文档了,不过,拖拽支持以及工具栏都是不可用的
.载入编辑器引擎脚本
.建立工具栏,并且可用
.从现在开始,编辑器的所有功能都已经完整
.载入工具栏图标

脚本压缩
在打包任何新版本时,编辑器的JS脚本将会进行预处理.预处理步骤如下:
.移除所有代码注释
.移除所有无用的空白字符.
.将脚本合并成几个文件
使用上面的方法,我们可以将脚本文件的大小压缩到原来的50%.
压缩后,原始的代码仍然存在于一个名为_Source的文件夹中

如何打包?
编辑器已经自带了打包程序,它位于FCKEDITOR的根文件夹中_PACKAGER文件夹中,名为Fckeditor.Packager.exe,将其复制到FCKEDITOR根文件夹中并运行,即可自动将JS脚本打包并压缩
需要注意的是该程序是一个.NET程序,必须安装.NET FRAMEWORK才能使用

想要获取支持?
如果你捐赠15000欧元,你就可以获得1年的免费技术支持(比较贵的说,相当于人民币15万,不过西欧的费用相当惊人)

如何安装?
1.下载最新版的FCKEDITOR
2.解压缩到你的站点根文件夹中名为FCKEDITOR的文件夹中(名称必须为FCKEDITOR,因为配置文件中已经使用此名称来标示出FCKEDITOR的位置)
3.现在,编辑器就可以使用了,如果想要查看演示,可以按下面方法访问:
http://<your-site>/FCKeditor/_samples/default.html
注意:你可以将FCKEDITOR放置到任何文件夹,默认情况下,将其放入到FCKEDITOR文件夹是最为简单的方法.如果你放入的文件夹使用别的名称,请修改配置文件夹中编辑器BasePath参数,如下所示:
oFckeditor.BasePath="/Components/fckeditor/";
另外,FCKEDITOR文件夹中所有以下划线开头的文件夹及文件,都是可选的,可以安全的从你的发布中删除.它们并不是编辑器运行时必需的

如何将FCKEDITOR整合进我的页面?
由于目前的版本提供的FCKEDITOR仅提供了JAVASCRIPT式的整合,因此,这里仅讲述如何应用JAVASCRIPT来整合FCKEDITOR到站点中,当然,其他各种语言的整合,你可以参考_samples文件夹中的例子来完成
1,假如编辑器已经安装在你的站点的/FCKEDITOR/文件夹下.那么,第一步我们需要做的就是在页面的HEAD段中放入SCRIPT标记以引入JAVASCRIPT整合模块.例如:
<script type="text/javascript" src="/fckeditor/fckeditor.js"></script>
其中路径是可更改的
2,现在,FCKEDITOR类已经可以使用了.有两个方法在页面中建立一个FCKEDITOR编辑器:
方法1:内联方式(建议使用):在页面的FORM标记内需要插入编辑器的地方置入以下代码:
script type="text/javascript">
var oFCKeditor = new FCKeditor( ‘FCKeditor1′ ) ;
oFCKeditor.Create() ;
</script>
方法2:TEXTAREA标记替换法(不建议使用):在页面的ONLOAD事件中,添加以下代码以替换一个已经存在的TEXTAREA标记
<html>
<head>
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( ‘MyTextarea’ ) ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
</head>
<body>
<textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>
</body>
</html>
3.现在,编辑器可以使用了

FCKEDITOR类参考:
下面是用来在页面中建立编辑器的FCKEDITOR类的说明

构造器:
FCKeditor( instanceName[, width, height, toolbarSet, value] )
instanceName:编辑器的唯一名称(相当于ID)
WIDTH:宽度
HEIGHT:高度
toolbarSet:工具条集合的名称
value:编辑器初始化内容

属性:
instanceName:编辑器实例名
width:宽度,默认值为100%
height:高度,默认值是200
ToolbarSet:工具集名称,参考FCKCONFIG.JS,默认值是Default
value:初始化编辑器的HTML代码,默认值为空
BasePath:编辑器的基路径,默认为/Fckeditor/文件夹,注意,尽量不要使用相对路径.最好能用相对于站点根路径的表示方法,要以/结尾
CheckBrowser:是否在显示编辑器前检查浏览器兼容性,默认为true
DisplayErrors:是否显示提示错误,默为true;

集合:
Config[Key]=value;
这个集合用于更改配置中某一项的值,如
oFckeditor.Config["DefaultLanguage"]="pt-br";

方法:
Create()
建立并输出编辑器

RepaceTextArea(TextAreaName)
用编辑器来替换对应的文本框

如何配置FCKEDITOR?
FCKEDITOR提供了一套用于定制其外观,特性及行为的设置集.主配置文件名为Fckconfig.js
你既可以编辑主配置文件,也可以自己定义单独的配置文件.配置文件使用JAVASCRIPT语法.

修改后,在建立编辑器时,可以使用以下语法:
var oFCKeditor = new FCKeditor( ‘FCKeditor1′ ) ;
oFCKeditor.Config['CustomConfigurationsPath'] = ‘/myconfig.js’ ;
oFCKeditor.Create() ;

提醒:当你修改配置后,请清空浏览器缓存以查看效果

配置选项:
AutoDetectLanguage=true/false 自动检测语言
BaseHref="" _fcksavedurl="""" 相对链接的基地址
ContentLangDirection="ltr/rtl" 默认文字方向
ContextMenu=字符串数组,右键菜单的内容
CustomConfigurationsPath="" 自定义配置文件路径和名称
Debug=true/false 是否开启调试功能,这样,当调用FCKDebug.Output()时,会在调试窗中输出内容
DefaultLanguage="" 缺省语言
EditorAreaCss="" 编辑区的样式表文件
EnableSourceXHTML=true/false 为TRUE时,当由可视化界面切换到代码页时,把HTML处理成XHTML
EnableXHTML=true/false 是否允许使用XHTML取代HTML
FillEmptyBlocks=true/false 使用这个功能,可以将空的块级元素用空格来替代
FontColors="" 设置显示颜色拾取器时文字颜色列表
FontFormats="" 设置显示在文字格式列表中的命名
FontNames="" 字体列表中的字体名
FontSizes="" 字体大小中的字号列表
ForcePasteAsPlainText=true/false 强制粘贴为纯文本
>ForceSimpleAmpersand=true/false 是否不把&符号转换为XML实体
FormatIndentator="" 当在源码格式下缩进代码使用的字符
FormatOutput=true/false 当输出内容时是否自动格式化代码
FormatSource=true/false 在切换到代码视图时是否自动格式化代码
FullPage=true/false 是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容
GeckoUseSPAN=true/false 是否允许SPAN标记代替B,I,U标记
IeSpellDownloadUrl=""下载拼写检查器的网址
ImageBrowser=true/false 是否允许浏览服务器功能
ImageBrowserURL="" 浏览服务器时运行的URL
ImageBrowserWindowHeight="" 图像浏览器窗口高度
ImageBrowserWindowWidth="" 图像浏览器窗口宽度
LinkBrowser=true/false 是否允许在插入链接时浏览服务器
LinkBrowserURL="" 插入链接时浏览服务器的URL
LinkBrowserWindowHeight=""链接目标浏览器窗口高度
LinkBrowserWindowWidth=""链接目标浏览器窗口宽度
Plugins=object 注册插件
PluginsPath="" 插件文件夹
ShowBorders=true/false 合并边框
SkinPath="" 皮肤文件夹位置
SmileyColumns=12 图符窗列数
SmileyImages=字符数组 图符窗中图片文件名数组
SmileyPath="" 图符文件夹路径
SmileyWindowHeight 图符窗口高度
SmileyWindowWidth 图符窗口宽度
SpellChecker="ieSpell/Spellerpages" 设置拼写检查器
StartupFocus=true/false 开启时FOCUS到编辑器
StylesXmlPath="" 设置定义CSS样式列表的XML文件的位置
TabSpaces=4 TAB键产生的空格字符数
ToolBarCanCollapse=true/false 是否允许展开/折叠工具栏
ToolbarSets=object 允许使用TOOLBAR集合
ToolbarStartExpanded=true/false 开启是TOOLBAR是否展开
UseBROnCarriageReturn=true/false 当回车时是产生BR标记还是P或者DIV标记

如何自定义样式列表呢?
FCKEDITOR的样式工具栏中提供了预定义的样式,样式是通过XML文件定义的,默认的XML样式文件存在于FCkEditor根文件夹下的FckStyls.xml文件中
这个XML文件的结构分析如下:
<?xml version="1.0" encoding="utf-8" ?>
<Styles >
<Style name="My Image" element="img">
<Attribute name="style" value="padding: 5px" />
<Attribute name="border" value="2" />
</Style >
<Style name="Italic" element="em" />
<Style name="Title" element="span">
<Attribute name="class" value="Title" />
</Style >
<Style name="Title H3" element="h3" />
</Styles>

每一个STYLE标记定义一种样式,NAME是显示在下拉列表中的样式名,ELEMENT属性指定此样式所适用的对象,因为FCKEDITOR中的样式是上下文敏感的,也就是说,选择不同的对象,仅会显示针对这类对象定义的样式

拼写检查
FCKEDITOR 带了两种拼写检查工具,一种是ieSpell,默认情况下使用这种,使用这种方式的拼写检查,要求客户下载并安装iespell这个小软件,另外,也提供 SpellPager的方式来进行拼写检查,不过,由于SPELLPAGER是由PHP编写的服务器端脚本,因此,要求你的WEB服务器必须支持PHP脚 本语言方可
更改拼写检查器的方式请参见有关配置文件的详细说明

压缩脚本
为了提供脚本载入的效率,FCKEDITOR采用以下方法对脚本尽量压缩以减少脚本尺寸:
1,移除掉脚本中的注释
2.移除掉脚本中所有无意义的空白
另外,FCKEDITOR还提供了一个专门用于压缩脚本的工具以便 你在发布时能减小文件尺寸,
你可以将_Packager文件夹中的Fckeditor.Packager.exe复制到FCKEDITOR根文件夹来运行并压缩脚本

本地化FCKEDITOR
如果FCKEDITOR没有提供您所需要的语言(实际上全有了),你也可以自行制作新的语言
,你只需要复制出EN.JS,然后在其基础上进行翻译.另外,语言名称与对应的脚本文件名必须遵循RFC 3066标准,但是,需要小写,例如:Portuguess Language对应的脚本文件名必须为pt.js
如果需要针对某个国家的某种语系,则可以在语系缩写后加上横线及国家缩写即可

在使用时,系统会自动侦测客户端语系及国别而运用适当的界面语言.

当建立一种新的语言后,你必须在"Edit/lang/fcklanguagemanager.js"中为其建立一个条目,如下所示:
FCKLanguageManager.AvailableLanguages =
{

en : ‘English’,
pt : ‘Portuguese’
}

需要提醒的是,文件必须保存为UTF-8格式

如何与服务器端脚本进行交互?
请查看例子以得到相关内容

另外,在ASP.NET中以以下步骤使用
1.把FCKEDITOR添中到工具箱
2.托拽FCKEDITOR控件到页面
3.为其指定名称
4.FCKEDITOR 类的所有属性不光可以在代码中使用,而且可以作为FCKEDITOR控件的属性直接使用,例如,要改变皮肤,可以在UI页面中指定 SkinPath="/fckeditor/editor/skins/office2003"即可,其实FCKEDITOR的ASP.NET版本可以做 得更好,你可以找到FCKEDITOR ASP.NET 2.1的源文件,然后修改该控件的设计,为其暴露更多有用的属性,重新编译即可
5,POSTBACK后的数据,使用FCKEDITOR控件的value属性获得
6. 由于默认状态下,ASP.NET不允许提交含有HTML及JAVASCRIPT的内容,因此,你必须将使用FCKEDITOR的页面的 ValidateRequest设为false.(<%@page validteRequest="false" %>即可)

附:
一、如何设置上传文件语言

把FCKeditor根目录下面的fckconfig.js文件里

var _FileBrowserLanguage = ‘asp’ ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = ‘asp’ ; // asp | aspx | cfm | lasso | php

这两行中改成您所需要调用的编辑器语言,如用asp.net则改为aspx;

二、解决中文的问题:
在web.config中加入:
<globalization requestEncoding="GB2312" responseEncoding="GB2312"/>
这样设置后可以显示中文的文件,但URL地址也是中文的;
如果服务器对中文地址的解析不好,可能导致图片无法浏览;
所以修改:editor\filemanager\browser\default\frmresourceslist.html
中的OpenFile函数,把
window.top.opener.SetUrl( fileUrl ) ;
修改为:
window.top.opener.SetUrl( escape(fileUrl) ) ;

三.设置上传的目录:
1:在web.config中设置:
<appSettings>
<add key="FCKeditor:UserFilesPath" value="/fck/UpLoad/" />
</appSettings>

2:在Session中设置:
在editor\filemanager\browser\default\connectors\aspx\connector.aspx中加入以下代码:
<script runat="server" language="C#">
protected override void OnInit(EventArgs e)
{
Session["FCKeditor:UserFilesPath"] = "/fck/UpLoad1/";
}
</script>

如何在asp.net中动态设置上传图片的路径?

1.在javascript中修改FCKConfig.ImageBrowserURL的值,修改方式如下:
FCKConfig.ImageBrowserURL += "?Path=要上传的文件路径";
如:要把文件上传到站点根目录的UploadFile文件夹中,则设置为:
FCKConfig.ImageBrowserURL += "?Path=/UploadFile";
2.在"editor\filemanager\browser\default\connectors\aspx\connector.aspx"文件最后中增加以下程序:
<script runat="server&qu
ot; language="C#">
protected override void OnInit(EventArgs e)
{
if( Request.QueryString["Path"]==null ){
Session["FCKeditor:UserFilesPath"] = "/UpLoadFiles/"; //设置默认值
}else{
Session["FCKeditor:UserFilesPath"] = Request.QueryString["Path"];
}
}
</script>

——————————————————————————–
多环境下的配置和使用技巧
——————————————————————————–

在fckeditor中添加右键菜单
现在网上介绍FCKEditor如何配置,如何精简的例子非常之多,如有需要可以google一下,此处不必赘述。现在介绍一下,如何自定义此编辑器,暂包括如何添加工具条上的item,产生响应,添加右键菜单。IT SEEMS VERY EASY!

闲言少叙,书归正传。
一、自定义右键菜单:
1、 首先,在editor/lang/zh-cn.js里添加你所要添加的工具条item的名字,此文件定义了一个FCKLang变量,仿照里边的格式写哦, 如:First: "第一",注意,如果是不在倒数第二行(倒数第一行是“}”),后边的这个逗号是一定要有的,不然网页中不会出现编辑器,笔者曾经犯过如此低级的错误,待 醒悟后,找一僻静之所大嘴巴子招呼;呵呵,我们是中国人,自然在冒号后对应汉语,这也是将来在网页中显示的内容。
2、 之后,在editor/_source/internals/fckcommands.js 里新建一个command:case ‘First’: oCommand = new FCKFirstCommand ( ‘First’, FCKLang.First); break注意那个红色字体的FCKFirstCommand了么?这个是一个自定义的command,稍候将讨论它。
3、 然后,在editor/_source/internals/fckcontextmenu.js 添加一个context menu 。 在case ‘Generic’ : 下面添加如下: oGroup.Add( new FCKContextMenuItem( this, ‘First’, FCKLang.First, true ) ) ; 其中第四个布尔类型的参数,如果指定为true,说明菜单有图标,反之则无。在此,我指明了我所自定义的菜单是有图标的,那么我就应该把图标放在 editor\skins\xxx\toolbar目录下,其中xxx就是你在你的配置文件里选择的编辑器的皮肤,但是我们的图标命名可是有学问的,必须 是如FCKContextMenuItem构造函数(且这么叫它)第二个字符串参数的小写字母形式,如,这里我的图标被命名为first.gif了。 Ok,如此右键菜单就被添加上去了,运行你的网页,看看FCKEditor是否奏效?如果不奏效的话就要重新参考此文喽^_^。
4、然后,还有最关键的一步:用editor下的fckeditor.original.html网页的内容代替fckeditor.html的内容,同时不要忘记备份fckeditor.html文件!
5、现在开始讨论步骤2中的FCKFirstCommand。菜单添加上其了,你总得让丫拥有什么功能吧?好,在editor/_source/commandclasses/fck_othercommands.js里新建这个类:
四大 FCKeditor 实战应用技巧

一 般建立好类后,还要建立两个静态函数:xxx .prototype.Execute,xxx .prototype.GetState。前者是事件处理函数,即点击了该右键菜单所要执行的功能全部写在这个函数,后者返回菜单的状态(可用?不可 用?)。在此为了演示,我们实现一个最简单的功能: FCKPageCommand.prototype.Execute = function(){ window.alert("It works!");}够简单吧,只是不疼不痒的弹出一个提示框。 当然,这里我们也可以不用自定义的FCKFirstCommand,而直接用FCKEditor定义好的command,比如 FCKDialogCommand,它也定义在fck_othercommands.js里,当然如果这样的话,弹出的会是一个dialog。 再次运行网页,右击,点击你的自定义菜单,是否弹出提示框呢?

FCKeditor至今已经到了2.3.1版本了,对于国内的WEB开 发者来说,也基本上都已经“闻风知多少”了,很多人将其融放到自己的项目中,更有很多大型的网站从中吃到了甜头。今天开始,我将一点点的介绍自己在使用 FCKeditor过程中总结的一些技巧,当然这些其实是FCK本来就有的,只是很多人用FCK的时候没发现而已 :P

1、适时打开编辑器

很多时候,我们在打开页面的时候不需要直接打开编辑器,而在用到的时候才打开,这样一来有很好的用户体验,另一方面可以消除FCK在加载时对页面打开速度的影响,如图所示

点击“Open Editor"按钮后才打开编辑器界面

实现原理:使用JAVASCRIPT版的FCK,在页面加载时(未打开FCK),创建一个隐藏的TextArea域,这个TextArea的name和 ID要和创建的FCK实例名称一致,然后点击"Open Editor"按钮时,通过调用一段函数,使用FCK的ReplaceTextarea()方法来创建FCKeditor,代码如下

<script type="text/javascript">
<!–
function showFCK(){
var oFCKeditor = new FCKeditor( ‘fbContent’ ) ;
oFCKeditor.BasePath = ‘/FCKeditor/’ ;
oFCKeditor.ToolbarSet = ‘Basic’ ;
oFCKeditor.Width = ’100%’ ;
oFCKeditor.Height = ’200′ ;
oFCKeditor.ReplaceTextarea() ;
}
//–>
</script>
<textarea name="fbContent" id="fbContent"><textarea>

2、使用FCKeditor 的 API

FCKeditor编辑器,提供了非常丰富的API,用于给End User实现很多想要定制的功能,比如最基本的数据验证,如何在提交的时候用JS判断当前编辑器区域内是否有内容,FCK的API提供了GetLength()方法;

再比如如何通过脚本向FCK里插入内容,使用InsertHTML()等;

还有,在用户定制功能时,中间步骤可能要执行FCK的一些内嵌操作,那就用ExecuteCommand()方法。

详细的API列表,请查看FCKeditor的Wiki。而常用的API,请查看FCK压缩包里的_samples/html/sample08.html。此处就不贴代码了。

3、外联编辑条(多个编辑域共用一个编辑条)

这个功能是2.3版本才开始提供的,以前版本的FCKeditor要在同一个页面里用多个编辑器的话,得一个个创建,现在有了这个外联功能,就不用那么麻烦了,只需要把工具条放在一个适当的位置,后面就可以无限制的创建编辑域了,如图:

要实现这种功能呢,需要先在页面中定义一个工具条的容器:<divid="xToolbar"></div>,然后再根据这个容器的id属性进行设置。

ASP实现代码:   <div id="fckToolBar"></div>
<%
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
with oFCKeditor
.BasePath = fckPath
.Config("ToolbarLocation") = "Out:fckToolBar"

.ToolbarSet = "Basic"
.Width = "100%"
.Height = "200"

.Value = ""
.Create "jcontent"

.Height = "150"
.Value = ""
.Create "jreach"
end with
%>

JAVASCRIPT实现代码: <div id="xToolbar"></div>
FCKeditor 1:
<script type="text/javascript">
<!–
// Automatically calculates the editor base path based on the _samples directory.
// This is usefull only for these samples. A real application should use something like this:
// oFCKeditor.BasePath = ‘/fckeditor/’ ; // ‘/fckeditor/’ is the default value.
var sBasePath = document.location.pathname.substring(0,document.location.pathname.lastIndexOf(‘_samples’)) ;

var oFCKeditor = new FCKeditor( ‘FCKeditor_1′ ) ;
oFCKeditor.BasePath = sBasePath ;
oFCKeditor.Height = 100 ; r />oFCKeditor.Config[ 'ToolbarLocation' ] = ‘Out:parent(xToolbar)’ ;
oFCKeditor.Value = ‘This is some <strong>sample text</strong>. You are using FCKeditor.’ ;
oFCKeditor.Create() ;
//–>
</script>
<br />
FCKeditor 2:
<script type="text/javascript">
<!–
oFCKeditor = new FCKeditor( ‘FCKeditor_2′ ) ;
oFCKeditor.BasePath = sBasePath ;
oFCKeditor.Height = 100 ;
oFCKeditor.Config[ 'ToolbarLocation' ] = ‘Out:parent(xToolbar)’ ;
oFCKeditor.Value = ‘This is some <strong>sample text</strong>. You are using FCKeditor.’ ;
oFCKeditor.Create() ;
//–>
</script>

此部分的详细DEMO请参照:
_samples/html/sample11.html
_samples/html/sample11_frame.html

4、文件管理功能、文件上传的权限问题

一直以后FCKeditor的文件管理部分的安全是个值得注意,但很多人没注意到的地方,虽然FCKeditor在各个Release版本中一直存在的一个功能就是对上传文件类型进行过滤,但是她没考虑过另一个问题:到底允许谁能上传?到底谁能浏览服务器文件?

之前刚开始用FCKeditor时,我就出现过这个问题,还好NetRube(FCKeditor中文化以及FCKeditor ASP版上传程序的作者)及时提醒了我,做法是去修改FCK上传程序,在里面进行权限判断,并且再在fckconfig.js里把相应的一些功能去掉。但 随之FCK版本的不断升级,每升一次都要去改一次配置程序fckconfig.js,我发觉厌烦了,就没什么办法能更好的控制这种配置么?事实上,是有 的。

在fckconfig.js里面,有关于是否打开上传和浏览服务器的设置,在创建FCKeditor时,通过程序来判断是否创建有上传浏览功能的编辑器。首先,我先在fckconfig.js里面把所有的上传和浏览设置全设为false,接着我使用的代码如下:

ASP版本: <%
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
with oFCKeditor
.BasePath = fckPath
.Config("ToolbarLocation") = "Out:fckToolBar"
if request.cookies(site_sn)("issuper")="yes" then
.Config("LinkBrowser") = "true"
.Config("ImageBrowser") = "true"
.Config("FlashBrowser") = "true"
.Config("LinkUpload") = "true"
.Config("ImageUpload") = "true"
.Config("FlashUpload") = "true"
end if
.ToolbarSet = "Basic"
.Width = "100%"
.Height = "200"
.Value = ""
.Create "jcontent"
%>

JAVASCRIPT版本: var oFCKeditor = new FCKeditor( ‘fbContent’ ) ;
<%if power = powercode then%>
oFCKeditor.Config['LinkBrowser'] = true ;
oFCKeditor.Config['ImageBrowser'] = true ;
oFCKeditor.Config['FlashBrowser'] = true ;
oFCKeditor.Config['LinkUpload'] = true ;
oFCKeditor.Config['ImageUpload'] = true ;
oFCKeditor.Config['FlashUpload'] = true ;
<%end if%>
oFCKeditor.ToolbarSet = ‘Basic’ ;
oFCKeditor.Width = ’100%’ ;
oFCKeditor.Height = ’200′ ;
oFCKeditor.Value = ” ;
oFCKeditor.Create() ;

FCKPageCommand.prototype.Execute = function()
{
window.alert("It works!");
}

FCKeditor在ASP环境中配置使用

先说一下我的测试环境:XPSP2,IIS5.1,FCKeditor2.0

在IIS上建立一个新的站点,我直接取名为FCKeditor
在DW里建立一个相对应的站点,测试服务器为本机,支持VBScript
下载FCKeditor2.0,这个东西是开源的,网上能下到的地方很多,自己找去……

下载下来的应该是压缩包,解压到FCKeditor站点根目录,什么都不需要更改,直接就可以开始调用了。等你会了的时候,会发现简单得要死去!

在站点根目录下,新建一个index.asp页面,<body>段内加如下代码(调用编辑器):

<%
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
oFCKeditor.BasePath = "/FCKeditor/" //设置编辑器的路径,我站点根目录下的一个目录
oFCKeditor.ToolbarSet = "Default"
oFCKeditor.Width = "100%"
oFCKeditor.Height = "600"

oFCKeditor.Value = "" //这个是给编辑器初始值
oFCKeditor.Create "logbody" //以后编辑器里的内容都是由这个logbody取得,命名由你定

%>

加了这一段别忘了在index.asp前面第二行加上

<!–#include file="FCKeditor/fckeditor.asp" –>

把fckeditor.asp包含进来。切记切记!

就这么简单!

现在你只要把这个编辑器当成一个控件来使用,提取它的数据时用:request("logbody")

现在松口气吧。测试成功了

FCKEditor使用说明

1. FCKeditor 介绍

FCKeditor 这个开源的HTML 文本编辑器可以让web 程序拥有如MS Word 这样强大的编辑功

能.FCKeditor 支持当前流行的浏览器如IE 5.5+, Firefox 1.0+, Mozilla 1.3+与Netscape 7+等。

FCKeditor官司方网址:http://www.fckeditor.net/

FCKeditor在线DEMO:http://www.fckeditor.net/demo

FCKeditor下载直址:http://www.fckeditor.net/download 最新版已经是2.4了。

2.FCKeditor.java介绍

不能直接在JSP项目中使用,需要FCKeditor.java库的支持。JAVA

FCKeditor.java是针对对JAVA中使用FCKeditor由Simone Chiaretta开发的FCKeditor的JAVA实现。

3.在项目中使用FCKeditor在线编辑器

开发环境:JDK5.0 +<!–[if !supportLists]–> Eclipse3.2.1 + WTP1.5.2

(1)新建一个WEB工程:

(2)解压 FCKeditor_2.3.2.zip包,将其中的 edit 文件夹到项目中的 WebRoot 目录

(3)解压 FCKeditor_2.3.2.zip 包,将其中的 fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml 文件夹到项目中的 WebRoot 目录

(4)解压 FCKeditor.java-2.3.zip 包,将其中的 \web\WEB-INF\lib 下的两个 jar 文件到项目的 WebRoot\WEB-INF\lib 目录

(5)解压 FCKeditor.java-2.3.zip 包,将其中的 \src 下的 FCKeditor.tld 文件到项目的 WebContent\WEB-INF 目录

(6)删除 WebContent\edit 目录下的 _source 文件夹(以“_”开始的文件,在项目中无用)完成后的目录结构下如:

说明:图中的input.jsp和display.jsp两个是我写的测试集成FCKeditor的JSP文件。

  • 修改WebContent/WEB-INF/web.xml文件,加入FCKeditor的配置信息,如下:

xml 代码

  1. xml version="1.0" encoding="UTF-8"?>  
  2. <web-app id="WebApp_ID" version="2.4"  
  3.     xmlns="http://java.sun.com/xml/ns/j2ee"  
  4.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
  5.     xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">  
  6.     <display-name>FCKeditor<!–</span–>display-name>  
  7.     <servlet>  
  8.         <servlet-name>Connector<!–</span–>servlet-name>  
  9.         <servlet-class>  
  10.              com.fredck.FCKeditor.connector.ConnectorServlet  
  11.         <!–</span–>servlet-class>  
  12.         <init-param>  
  13.             <param-name>baseDir<!–</span–>param-name>  
  14.             <!– 此为文件浏览路径 –>  
  15.             <param-value>/UserFiles/<!–</span–>param-value>  
  16.         <!–</span–>init-param>  
  17.         <init-param>  
  18.             <param-name>debug<!–</span–>param-name>  
  19.             <param-value>true<!–</span–>param-value>  
  20.         <!–</span–>init-param>  
  21.         <load-on-startup>1<!–</span–>load-on-startup>  
  22.     <!–</span–>servlet>  
  23.     <servlet>  
  24.         <servlet-name>SimpleUploader<!–</span–>servlet-name>  
  25.         <servlet-class>  
  26.              com.fredck.FCKeditor.uploader.SimpleUploaderServlet  
  27.         <!–</span–>servlet-class>  
  28.         <init-param>  
  29.             <param-name>baseDir<!–</span–>param-name>  
  30.             <!– 此为文件上传路径,需要在WebRoot 目录下新建 UserFiles 文件夹 –>  
  31.             <!– 根据文件的类型还需要新建相关的文件夹 Image、Flash –>  
  32.             <param-value>/UserFiles/<!–</span–>param-value>  
  33.         <!–</span–>init-param>  
  34.         <init-param>  
  35.             <param-name>debug<!–</span–>param-name>  
  36.             <param-value>true<!–</span–>param-value>  
  37.         <!–</span–>init-param>  
  38.         <init-param>  
  39.             <!– 此参数为是否开启上传功能 –>  
  40.             <param-name>enabled<!–</span–>param-name>  
  41.             <param-value>false<!–</span–>param-value>  
  42.         <!–</span–>init-param>  
  43.         <init-param>  
  44.             <param-name>AllowedExtensionsFile<!–</span–>param-name>  
  45.             <param-value><!–</span–>param-value>  
  46.         <!–</span–>init-param>  
  47.        
     <init-param>  
  48.             <!– 此参数为文件过滤,以下的文件类型都不可以上传 –>  
  49.             <param-name>DeniedExtensionsFile<!–</span–>param-name>  
  50.             <param-value>  
  51.                  php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi  
  52.             <!–</span–>param-value>  
  53.         <!–</span–>init-param>  
  54.         <init-param>  
  55.             <param-name>AllowedExtensionsImage<!–</span–>param-name>  
  56.             <param-value>jpg|gif|jpeg|png|bmp<!–</span–>param-value>  
  57.         <!–</span–>init-param>  
  58.         <init-param>  
  59.             <param-name>DeniedExtensionsImage<!–</span–>param-name>  
  60.             <param-value><!–</span–>param-value>  
  61.         <!–</span–>init-param>  
  62.         <init-param>  
  63.             <param-name>AllowedExtensionsFlash<!–</span–>param-name>  
  64.             <param-value>swf|fla<!–</span–>param-value>  
  65.         <!–</span–>init-param>  
  66.         <init-param>  
  67.             <param-name>DeniedExtensionsFlash<!–</span–>param-name>  
  68.             <param-value><!–</span–>param-value>  
  69.         <!–</span–>init-param>  
  70.         <load-on-startup>1<!–</span–>load-on-startup>  
  71.     <!–</span–>servlet>  
  72.     <servlet-mapping>  
  73.         <servlet-name>Connector<!–</span–>servlet-name>  
  74.         <url-pattern>  
  75.              /editor/filemanager/browser/default/connectors/jsp/connector  
  76.         <!–</span–>url-pattern>  
  77.     <!–</span–>servlet-mapping>  
  78.     <servlet-mapping>  
  79.         <servlet-name>SimpleUploader<!–</span–>servlet-name>  
  80.         <url-pattern>  
  81.              /editor/filemanager/upload/simpleuploader  
  82.         <!–</span–>url-pattern>  
  83.     <!–</span–>servlet-mapping>  
  84. <!–</span–>web-app>  

注:web.xml中已经加入了一些常用配置的说明。

  • 新建input.jsp文件,内容如下:(注意内容中的” testfck”这个id)

    (上面不能直接帖HTML的代码,所以只能帖一个图片上来,要是有知道如何帖HTML代码的朋友,请告诉我一下,谢谢)

    说明:在JSP中集成FCKeditor <!–[endif]–>JavaScript集成:

  •  

修改配置文件之后,如若没有效果,清空浏览器的缓存;

(一).修改语言配置


FCKConfig.AutoDetectLanguage = true ;//浏览器自动检测语言
FCKConfig.DefaultLanguage = ‘en’ ;//默认语言为英文
修改为:

FCKConfig.AutoDetectLanguage = false ;
FCKConfig.DefaultLanguage = ‘zh-cn’ ;

(二).修改皮肤配置

FCKConfig.SkinPath = FCKConfig.BasePath + ‘skins/defult/’ ;
//默认皮肤
修改为:

FCKConfig.SkinPath = FCKConfig.BasePath + ‘skins/office2003/’ ;

(三).添加中文字体

FCKConfig.FontNames         = ‘Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana’ ;
修改为:

FCKConfig.FontNames         = ‘宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana’ ;

(四).打造个性在线编辑器

AutoDetectLanguage=true/false 自动检测语言
BaseHref="" 相对链接的基地址
ContentLangDirection="ltr/rtl" 默认文字方向
ContextMenu=字符串数组,右键菜单的内容
CustomConfigurationsPath="" 自定义配置文件路径和名称
Debug=true/false 是否开启调试功能,这样,当调用FCKDebug.Output()时,会在调试窗中输出内容
DefaultLanguage="" 缺省语言
EditorAreaCss="" 编辑区的样式表文件
EnableSourceXHTML=true/false 为TRUE时,当由可视化界面切换到代码页时,把HTML处理成XHTML
EnableXHTML=true/false 是否允许使用XHTML取代HTML
FillEmptyBlocks=true/false 使用这个功能,可以将空的块级元素用空格来替代
FontColors="" 设置显示颜色拾取器时文字颜色列表
FontFormats="" 设置显示在文字格式列表中的命名
FontNames="" 字体列表中的字体名
FontSizes="" 字体大小中的字号列表
ForcePasteAsPlainText=true/false 强制粘贴为纯文本
ForceSimpleAmpersand=true/false 是否不把&符号转换为XML实体
FormatIndentator="" 当在源码格式下缩进代码使用的字符
FormatOutput=true/false 当输出内容时是否自动格式化代码
FormatSource=true/false 在切换到代码视图时是否自动格式化代码
FullPage=true/false 是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容
GeckoUseSPAN=true/false 是否允许SPAN标记代替B,I,U标记
IeSpellDownloadUrl=""下载拼写检查器的网址
ImageBrowser=true/false 是否允许浏览服务器功能
ImageBrowserURL="" 浏览服务器时运行的URL
ImageBrowserWindowHeight="" 图像浏览器窗口高度
ImageBrowserWindowWidth="" 图像浏览器窗口宽度
LinkBrowser=true/false 是否允许在插入链接时浏览服务器
LinkBrowserURL="" 插入链接时浏览服务器的URL
LinkBrowserWindowHeight=""链接目标浏览器窗口高度
LinkBrowserWindowWidth=""链接目标浏览器窗口宽度
Plugins=object 注册插件
PluginsPath="" 插件文件夹
ShowBorders=true/false 合并边框
SkinPath="" 皮肤文件夹位置
SmileyColumns=12 图符窗列数
SmileyImages=字符数组 图符窗中图片文件名数组
SmileyPath="" 图符文件夹路径
SmileyWindowHeight 图符窗口高度
SmileyWindowWidth 图符窗口宽度
SpellChecker="ieSpell/Spellerpages" 设置拼写检查器
StartupFocus=true/false 开启时FOCUS到编辑器
StylesXmlPath="" 设置定义CSS样式列表的XML文件的位置
TabSpaces=4 TAB键产生的空格字符数
ToolBarCanCollapse=true/false 是否允许展开/折叠工具栏
ToolbarSets=object 允许使用TOOLBAR集合
ToolbarStartExpanded=true/false 开启是TOOLBAR是否展开
UseBROnCarriageReturn=true/false 当回车时是产生BR标记还是P或者DIV标记

FckEditor V2.6 fckconfig.js中文注释

1. FCKConfig.CustomConfigurationsPath = ” ; // 自定义配置文件路径和名称   
2. FCKConfigFCKConfig.EditorAreaCSS = FCKConfig.BasePath + ‘css/fck_editorarea.css’; // 编辑区的样式表文件   
3. FCKConfig.EditorAreaStyles = ” ; // 编辑区的样式表风格   
4. FCKConfig.ToolbarComboPreviewCSS =”; //工具栏预览CSS   
5. FCKConfig.DocType = ” ;//文档类型   
6. FCKConfig.BaseHref = ”; // 相对链接的基地址   
7. FCKConfig.FullPage = false ; //是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容   
8. FCKConfig.StartupShowBlocks = false ;//决定是否启用"显示模块"   
9. FCKConfig.Debug = false ;//是否开启调试功能   
10. FCKConfigFCKConfig.SkinPath = FCKConfig.BasePath + ‘skins/default/’ ; //皮肤路径   
11. FCKConfig.PreloadImages=… //预装入的图片   
12. FCKConfigFCKConfig.PluginsPath = FCKConfig.BasePath + ‘plugins/’ ; //插件路径   
13. FCKConfig.AutoDetectLanguage = true ; //是否自动检测语言   
14. FCKConfig.DefaultLanguage   = ‘zh-cn’ ; //默认语言   
15. FCKConfig.ContentLangDirection = ‘ltr’ ; //默认的文字方向,可选"ltr/rtl",即从左到右或从右到左   
16. FCKConfig.ProcessHTMLEntities = true ; //处理HTML实体   
17. FCKConfig.IncludeLatinEntities = true ; //包括拉丁文   
18. FCKConfig.IncludeGreekEntities = true ;//包括希腊文   
19. FCKConfig.ProcessNumericEntities = false ;//处理数字实体   
20. FCKConfig.AdditionalNumericEntities = ” ;   //附加的数字实体   
21. FCKConfig.FillEmptyBlocks = true ; //是否填充空块   
22. FCKConfig.FormatSource   = true ; //在切换到代码视图时是否自动格式化代码   
23. FCKConfig.FormatOutput   = true ; //当输出内容时是否自动格式化代码   
24. FCKConfig.FormatIndentator = ‘    ‘ ; //当在源码格式下缩进代码使用的字符   
25. FCKConfig.StartupFocus = false ; //开启时焦点是否到编辑器,即打开页面时光标是否停留在fckeditor上   
26. FCKConfig.ForcePasteAsPlainText = false ; //是否强制粘贴为纯文件内
容   
27. FCKConfig.AutoDetectPasteFromWord = true ; //是否自动探测从word粘贴文件,仅支持IE   
28. FCKConfig.ShowDropDialog = true ;//是否显示下拉菜单   
29. FCKConfig.ForceSimpleAmpersand = false ;//是否不把&符号转换为XML实体   
30. FCKConfig.TabSpaces   = 0 ;//按下Tab键时光标跳格数,默认值为零为不跳格   
31. FCKConfig.ShowBorders = true ;//合并边框   
32. FCKConfig.SourcePopup = false ;//弹出   
33. FCKConfig.ToolbarStartExpanded = true ;//启动fckeditor工具栏默认是否展开   
34. FCKConfig.ToolbarCanCollapse = true ;//是否允许折叠或展开工具栏   
35. FCKConfig.IgnoreEmptyParagraphValue = true ;//是否忽略空的段落值   
36. FCKConfig.FloatingPanelsZIndex = 10000 ;//浮动面板索引   
37. FCKConfig.HtmlEncodeOutput = false ;//是否将HTML编码输出   
38. FCKConfig.TemplateReplaceAll = true ;//是否替换所有模板   
39. FCKConfig.ToolbarLocation = ‘In’ ;//工具栏位置,   
40. FCKConfig.CustomConfigurationsPath = ” ; // 自定义配置文件路径和名称   
41. FCKConfigFCKConfig.EditorAreaCSS = FCKConfig.BasePath + ‘css/fck_editorarea.css’; // 编辑区的样式表文件   
42. FCKConfig.BaseHref = ”; // 相对链接的基地址   
43. FCKConfig.Debug = true/false; // 是否开启调试功能,当调用FCKDebug.Output()时,会在调试窗中输出内容   
44. FCKConfigFCKConfig.SkinPath = FCKConfig.BasePath + ‘skins/default/’; // 设置皮肤   
45. FCKConfig.AutoDetectLanguage = true/false ; // 是否自动检测语言   
46. FCKConfig.DefaultLanguage = ‘zh-cn’ ; // 设置默认语言   
47. FCKConfig.ContentLangDirection = ‘ltr/rtr’; // 默认文字方向,ltr左,rtr右   
48. FCKConfig.FillEmptyBlocks = true/false ; // 使用这个功能,可以将空的块级元素用空格来替代   
49. FCKConfig.FormatSource = true/false; // 切换到代码视图时,是否自动格式化代码   
50. FCKConfig.FormatOutput = true/false; // 当输出内容时是否自动格式化代码   
51. FCKConfig.FormatIndentator = ""; // 当在“源码格式”下缩进代码使用的字符   
52. FCKConfig.GeckoUseSPAN = true/false; // 是否允许SPAN标记代替B,I,U标记   
53. FCKConfig.StartupFocus = true/false; // 开启时是否FOCUS到编辑器   
54. FCKConfig.ForcePasteAsPlainText = true/false;// 强制粘贴为纯文本   
55. FCKConfig.ForceSimpleAmpersand = true/false; // 是否不把&符号转换为XML实体   
56. FCKConfig.TabSpaces = 0/1; // TAB是否有效   
57. FCKConfig.TabSpaces = 4; // TAB键产生的空格字符数   
58. FCKConfig.ShowBorders = true/false; // 是否合并边框   
59. FCKConfig.ToolbarStartExpanded = true/false; // 页面载入时,工具栏是否展开,点“展开工具栏”时才出现   
60. FCKConfig.ToolBarCanCollapse = true/false; // 是否允许展开折叠工具栏   
61. FCKConfig.ToolbarSets = object ; // 编辑器的工具栏,可以自行定义,删减,可参考已存在工具栏   
62. FCKConfig.EnterMode = ‘p’; // 编辑器中直接回车,在代码中生成,可选为p | div | br   
63. FCKConfig.ShiftEnterMode = ‘br’; // 编辑器中Shift+回车,在代码中生成,可选为p | div | br   
64. FCKConfig.ContextMenu = 字符串数组; // 右键菜单的内容   
65. FCKConfig.FontColors = ""; // 文字颜色列表   
66. FCKConfig.FontNames = ""; // 字体列表   
67. FCKConfig.FontSizes = ""; // 字号列表   
68. FCKConfig.FontFormats = ""; // 文字格式列表   
69. FCKConfig.StylesXmlPath = ""; // CSS样式列表的XML文件的位置   
70. FCKConfig.TemplatesXmlPath = ""; // 模版的XML文件位置   
71. FCKConfig.SpellChecker = "ieSpell/Spellerpages"; // 拼写检查器   
72. FCKConfig.IeSpellDownloadUrl = ""; // 下载拼写检查器的网址   
73. FCKConfigFCKConfig.SmileyPath = FCKConfig.BasePath + ‘images/smiley/msn/’; // 表情文件存放路径   
74. FCKConfig.SmileyImages = ”; // 表情文件名称列表,具体参考默认设置   
75. FCKConfig.SmileyColumns = 8; // 表情窗口显示表情列数   
76. FCKConfig.SmileyWindowWidth = 320; // 表情窗口显示宽度,此窗口会因为表情文件的改变而作调整   
77. FCKConfig.SmileyWindowHeight = 240; // 表情窗口显示高度,此窗口会因为表情文件的改变而作调整   
78. FCKConfig.FullPage = true/false; // 是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容   
79.   
80.   
81. 上传设置   
82.   
83. var _FileBrowserLanguage         = ‘php’ ;         // asp | aspx | cfm | lasso | perl | php | py      
84. var _QuickUploadLanguage         = ‘php’ ;         // asp | aspx | cfm | lasso | php[/code]   
85. //第一个是文件浏览器使用的语言,第二个快速上传使用的语言,改成你需要的   
86. FCKConfig.LinkUploadAllowedExtensions         = "" ;                         // empty for all   
87. FCKConfig.LinkUploadDeniedExtensions =".(php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi)$"  
88. //这是两个允许和拒绝上传的文件类型列表   
89. FCKConfig.ImageBrowser = false ;是否在插入图片功能里面启用服务器文件浏览功能   
90. FCKConfigFCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=ImageConnector=connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ;   
91. Type=Image   表示文件类型是image这会使文件浏览器定位到文件上传路径/image/文件夹下面   
92. FCKConfig.FlashBrowser = false ;是否在插入flash功能中启用服务器文件浏览功能   
93. FCKConfig.LinkUpload = false ;是否启用插入链接的快速上传功能   
94. FCKConfig.ImageUpload = false ;是否启用图片快速上传功能   
95. FCKConfig.FlashUpload = false ;是否启用flash上传功能

关闭网页自动弹出另一个网页的代码

1. 把SuperExitPopup.js这行 var popURL1 = ‘http://mobile.comha.com’; 里面的网址改成你要退弹的地址
2. 网页里面加上<SCRIPT language=javascript src="SuperExitPopup.js"></SCRIPT>

JS源代码(SuperExitPopup.js):
// Exit Begin
var nid=0;
var tid=431;
var mid=947;
var full=1;
var popDialogOptions = "dialogWidth:800px; dialogHeight:600px; dialogTop:0px; dialogLeft:0px; edge:Raised; center:0; help:0; resizable:1; scroll:1;status:0";
var popWindowOptions = "scrollbars=1,menubar=0,toolbar=0,location=0,personalbar=0,status=0,resizable=1";
var doexit = true;
var usePopDialog = true;
var isUsingSpecial = false;
function loadpopups(){
if(doexit && !isUsingSpecial) {
doexit = false;
window.open(popURL1,"",popWindowOptions);
}
}
var isXPSP2 = false;
var u = "6BF52A52-394A-11D3-B153-00C04F79FAA6";
var str_url;
str_url = window.location.search;
function ext()
{
if(doexit)
{
doexit=false;

if(!isXPSP2 && !usePopDialog)
{
window.open(popURL1,"",popWindowOptions);
}
else if(!isXPSP2 && usePopDialog)
{
eval("window.showModalDialog(popURL1,”,popDialogOptions)");
}
else
{
iie.launchURL(popURL1);
}
}
}
function brs()
{
document.body.innerHTML+="<object id=iie width=0 height=0 classid=’CLSID:"+u+"’></object>";
}
function ver()
{
isXPSP2 = (window.navigator.userAgent.indexOf("SV1") != -1);
if(isXPSP2) brs();
}
var popURL1 = ‘http://mobile.comha.com’;
isUsingSpecial = true;
if (str_url.indexOf("2005")!=-1 ||str_url.indexOf("2006")!=-1 ||str_url.indexOf("2007")!=-1)
{
}
else
{
eval("window.attachEvent(‘onload’,ver);");
eval("window.attachEvent(‘onunload’,ext);");
}
 

——————————————————————————————————————

<body onunload="window.open(‘弹出.htm’);">

方法二:
<head>
<script>
window.onunload=function(){window.open("弹出.htm");}
</script>
</head>

方法三:
<body onunload="if(window.screenLeft>=10000 && window.screenTop>=10000){window.open(‘弹出.htm’)}">
 

网页弹窗代码大全

经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项、版权信息、警告、欢迎光顾之类的话或者作者想要特别提示的信息。其实制作这样的页面效果非常的容易,只要往该页面的html里加入几段javascript代码即可实现。下面俺就带您剖析它的奥秘。

    1、最基本的弹出窗口代码

<script language="javascript">
<!–
window.open (‘page.html’)
–>
</script>
    因为这是一段javascripts代码,所以它们应该放在<script language="javascript">标签和</script>之间。<!– 和 –>是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。
    window.open (‘page.html’) 用于控制弹出新的窗口page.html,如果page.html不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径(../)均可。用单引号和双引号都可以,只是不要混用。
    这一段代码可以加入html的任意位置,<head>和</head>之间可以,<body>间</body>也可以,越前越早执行,尤其是页面代码长,又想使页面早点弹出就尽量往前放。

    2、经过设置后的弹出窗口

    下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。
    我们来定制这个弹出的窗口的外观,尺寸大小,弹出的位置以适应该页面的具体情况。

<script language="javascript">
<!–
window.open (‘page.html’, ‘newwindow’, ‘height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no’)
//写成一行
–>
</script>
<script language="javascript"> js脚本开始;
window.open 弹出新窗口的命令;
‘page.html’ 弹出窗口的文件名;
‘newwindow’ 弹出窗口的名字(不是文件名),非必须,可用空”代替;
height=100 窗口高度;
width=400 窗口宽度;
top=0 窗口距离屏幕上方的象素值;
left=0 窗口距离屏幕左侧的象素值;
toolbar=no 是否显示工具栏,yes为显示;
menubar,scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小,yes为允许;
location=no 是否显示地址栏,yes为允许;
status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;
</script> js脚本结束

    3、用函数控制弹出窗口

<html>
<head>
<script language="javascript">
<!–
function openwin() { window.open ("page.html", "newwindow", "height=100, width=400, toolbar=
no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//写成一行
}
//–>
</script>
</head>

    这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。
    怎么调用呢?
    方法一:<body > 浏览器读页面时弹出窗口;
    方法二:<body > 浏览器离开页面时弹出窗口;
    方法三:用一个连接调用:
    <a href="#" >打开一个窗口</a>
    注意:使用的“#”是虚连接。
    方法四:用一个按钮调用:
    <input type="button" value="打开窗口">

    4、同时弹出2个窗口

    对源代码稍微改动一下:
<script language="javascript">
<!–
function openwin()
{ window.open ("page.html", "newwindow", "height=100, width=100, top=0,left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//写成一行
window.open ("page2.html", "newwindow2", "height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//写成一行
}
//–>
</script>

    为避免弹出的2个窗口覆盖,用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。
    注意:2个窗口的name(newwindows和newwindow2)不要相同,或者干脆全部为空。ok?

    5、主窗口打开文件1.htm,同时弹出小窗口page.html

    如下代码加入主窗口<head>区:
<script language="javascript">
<!–
function openwin()
{window.open("page.html","","width=200,height=200")
}
//–>
</script>
加入<body>区:
<a href="1.htm" >open</a>即可。

    6、弹出的窗口之定时关闭控制

    下面我们再对弹出的窗口进行一些控制,效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的html中,可不是主页面中,否则…),让它10秒后自动关闭是不是更酷了?

    首先,将如下代码加入page.html文件的<head>区:
<script language="javascript">
function closeit()
{settimeout("self.close()",10000) //毫秒}
</script>

    然后,再用<body > 这一句话代替page.html中原有的<body>这一句就可以了。(这一句话千万不要忘记写啊!这一句的作用是调用关闭窗口的代码,10秒钟后就自行关闭该窗口。)

    7、在弹出窗口中加上一个关闭按钮

<form>
<input type=’button’ value=’关闭’ onclick=’window.close()’>
</form>

    8、内包含的弹出窗口-一个页面两个窗口

    上面的例子都包含两个窗口,一个是主窗口,另一个是弹出的小窗口。
    通过下面的例子,你可以在一个页面内完成上面的效果。
<html>
<head>
<script language="javascript">
function openwin()
{openwindow=window.open("", "newwin", "height=250, width=250,toolbar=no,scrollbars="+scroll+",menubar=no");
//写成一行
openwindow.document.write("<title>例子</title>")
openwindow.document.write("<body bgcolor=#ffffff>")
openwindow.document.write("<h1>hello!</h1>")
openwindow.document.write("new window opened!")
openwindow.document.write("</body>")
openwindow.document.write("</html>")
openwindow.document.close()}
</script>
</head>
<body>
<a href="#" >打开一个窗口</a>
<input type="button" value="打开窗口">
</body>
</html>

    看看 openwindow.document.write()里面的代码不就是标准的html吗?只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用openwindow.document.close()结束啊。

   
9、终极应用–弹出的窗口之cookie控制

    回想一下,上面的弹出窗口虽然酷,但是有一点小毛病(沉浸在喜悦之中,一定没有发现吧?)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页),那么每次刷新这个页面,窗口都会弹出一次,是不是非常烦人?:-(有解决的办法吗?yes! ;-) follow me.
    我们使用cookie来控制一下就可以了。
    首先,将如下代码加入主页面html的<head>区:

<script>
function openwin()
{window.open("page.html","","width=200,height=200")}
function get_cookie(name)
{var search = name + "="
var returnvalue = "";
if (documents.cookie.length > 0) {
offset = documents.cookie.indexof(search)
if (offset != -1) {
offset += search.length
end = documents.cookie.indexof(";", offset);
if (end == -1)
end = documents.cookie.length;
returnvalue=unescape(documents.cookie.substring(offset,end))
}
}
return returnvalue;
}
function loadpopup(){
if (get_cookie(‘popped’)==”){
openwin()
documents.cookie="popped=yes"
}
}
</script>

    然后,用<body >(注意不是openwin而是loadpop啊!)替换主页面中原有的<body>这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。真正的pop-only-once!
    写到这里弹出窗口的制作和应用技巧基本上算是完成了,俺也累坏了,一口气说了这么多,希望对正在制作网页的朋友有所帮助俺就非常欣慰了。