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">
<!--
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>
<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 中的全局变量:
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();
}
}
在线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">
<!--
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>
<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 中的全局变量:
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();
}
}