163编辑器学习笔记

radovi · 发表于 2013-2-7 20:48:52

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">                       </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中的全局变量：

var gSetColorType = ""; //document.all是ie浏览器特有的属性 gIsIE用于判断当前浏览器是否是IEvar gIsIE = document.all; var gIEVer = fGetIEVer(); //获取当前使用的IE的version//页面是否全部加载完毕，包括所有图片和文字。 //gLoaded的属性在window.onload = function(){……}执行后变为truevar 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编辑器的源代码。

		自动登录	找回密码
密码			立即注册