163编辑器

可爱の小猪

浏览: 106977 次
性别:
来自: 南充

最近访客更多访客>>

if2losemyself

myyate

3280431418

zhangzikai

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

java学习

浏览器 IE HTML

163Editor编辑器的源代码结构

在线html 编辑器的原理基本类似，都是 iframe 标签中用 src 属性包含一个 html 文件，用户编辑的时候事实上就是在编辑这个文件。当然， iframe 必须为可编辑状态。

如163Editor 中：（ 163Editor.html ）

Js代码
<iframe src="editor/editor.html?id=content"    frameborder="0"   scrolling="no" width="700" height="320"> </iframe>

<iframe src="editor/editor.html?id=content"    frameborder="0"   scrolling="no" width="700" height="320"> </iframe>

不难发现，编辑的页面其实是editor.html.

打开editor.html,

这个html 文件有以下几部分组成：

Html代码
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/bg.gif" ……
……………………………………………………………………………………
这里的内容请读者自己查看源代码这部分的代码……………………………………………
就是编辑器的工具栏，主要是一些图片按钮以及事件……………………
……………………………………………………………………………………
……………………………………………………………………………………

<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/bg.gif" ……
……………………………………………………………………………………
这里的内容请读者自己查看源代码这部分的代码……………………………………………
就是编辑器的工具栏，主要是一些图片按钮以及事件……………………
……………………………………………………………………………………
……………………………………………………………………………………
接下去是编辑区域：

Html代码
<div id="divEditor">
            <SCRIPT LANGUAGE="JavaScript">
                
            </SCRIPT>
        </div>
        <SCRIPT LANGUAGE="JavaScript">
            
        </SCRIPT>

<div id="divEditor">
            <SCRIPT LANGUAGE="JavaScript">
                
            </SCRIPT>
        </div>
        <SCRIPT LANGUAGE="JavaScript">
            
        </SCRIPT>
这是说明几点：

Editor.html中其实是有两个文本区域，分别是

<IFRAME ID="HtmlEditor" name="HtmlEditor"和

<textarea ID="sourceEditor"

这里还有一点是：

此处的iframe 又 src 了个页面 blankpage.html

所以，得出一个比较重要的结论：163 编辑器的编辑区域中的内容最终是显示 blankpage.html 中的内容，也就是说用户其实是在编辑这个页面。

至此，editor.html

分析editor.html 中包含进的几个 js 文件

script/editfunc.js

这个文件定义了编辑器的几个核心function

这个js 中的全局变量：

Js代码
var gSetColorType = "";
      //document.all是ie浏览器特有的属性 gIsIE用于判断当前浏览器是否是IE
var gIsIE = document.all;
var gIEVer = fGetIEVer();     //获取当前使用的IE的version
//页面是否全部加载完毕，包括所有图片和文字。
//gLoaded的属性在window.onload = function(){……}执行后变为true
var gLoaded = false;
var ev = null;

入口函数：
/*
* 当前页面中的全部内容都加载完毕后，执行这个函数
*/
window.onload = function()
{
    try{
        gLoaded = true;      //把这个量的值改成true，表示页面已经加载完毕了
        fSetEditable();      //把页面上的指定的iframe变成编辑模式
        fSetFrmClick();
        ResetDomain();
        fSetHtmlContent();
        top.frames["jsFrame"].fHideWaiting();
    }
    catch(e)
    {
        // window.location.reload();
    }
}

163Editor.rar (18.8 KB)
下载次数: 62

分享到：

http://fykyx521.javaeye.com/blog/517138 | Flex 修改浏览器页面标题

2009-10-31 20:50
浏览 1835
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

163编辑器

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

163编辑器

评论

发表评论

相关推荐

江哥读:创业者必看（马云语录）

LOG4J的配置..实现了输出到控制台、文件、回滚文件、发送日志邮件

IE6中用了float:left之后导致margin-left双倍边距的BUG解决方法

Hibernate三大类查询总结

JAVA认证考试历年经典面试题目整理

JAVA SSH框架

Spring Security 安全框架

Eclipse快捷键

Hibernate查询Query By Criterial

DispatchAction, LookupDispatchAction, MappingDispatchAction深入分析

FCKeditor在struts2中无法上传文件的解决办法

java备份和恢复mysql数据库

tomcat设置虚拟域名

mysql数据库同步

http://fykyx521.javaeye.com/blog/517138

Flex 修改浏览器页面标题

PHP连接数据库

用Flex+Spring+Hibernate写一个登录

FLEX和Spring、Hibernate的集成 - Flex+Spring

ssh2分页例子

最近访客更多访客>>