163编辑器学习笔记

最新推荐文章于 2011-09-23 10:16:07 发布

ncradovi

最新推荐文章于 2011-09-23 10:16:07 发布

阅读量219

点赞数

分类专栏： web前端开发文章标签：浏览器 IE fckeditor JavaScript HTML ViewUI

web前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

163Editor编辑器

163Editor编辑器的源代码结构

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

如163Editor 中：（ 163Editor.html ）

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

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

打开editor.html,

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

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

接下去是编辑区域：

<div id="divEditor">
            <SCRIPT LANGUAGE="JavaScript">
                <!--
                if (document.all) {
                    document.write('<table width="100%" height:287px border="0" cellspacing="0" cellpadding="0" ><tr><td style="border:1px solid #C5C5C5; border-top:0;"><IFRAME class="HtmlEditor" ID="HtmlEditor" name="HtmlEditor" style=" height:286px;width:100%" frameBorder="0" marginHeight=0 marginWidth=0 src="blankpage.htm"></IFRAME></td></tr></table>');
                }
                else {
                    document.write('<table width="100%" height:288px border="0" cellspacing="0" cellpadding="0" ><tr><td style="border:1px solid #C5C5C5; border-top:0;background-color:#ffffff"><IFRAME class="HtmlEditor" ID="HtmlEditor" name="HtmlEditor" style=" height:283px;width:100%;margin-left:1px;margin-bottom:1px;" frameBorder="0" marginHeight=0 marginWidth=0 src="blankpage.htm"></IFRAME></td></tr></table>');
                }
                //-->
            </SCRIPT>
        </div>
        <SCRIPT LANGUAGE="JavaScript">
            <!--
            if (document.all) {
                document.write('<textarea ID="sourceEditor" style="height:280px;width:100%;display:none">');
            }
            else {
                document.write('<textarea ID="sourceEditor" style="height:282px;width:100%;display:none">');
            }
            
            //-->
        </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 中的全局变量：

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();
	}
}

附件中有163编辑器的源代码。

ncradovi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
163编辑器学习笔记

163Editor编辑器163Editor编辑器的源代码结构在线html编辑器的原理基本类似，都是iframe标签中用src属性包含一个html文件，用户编辑的时候事实上就是在编辑这个文件。当然，iframe必须为可编辑状态。如163Editor中：（163Editor.html）...
复制链接

扫一扫