163编辑器学习笔记

163Editor编辑器


163编辑器学习笔记_第1张图片

163Editor编辑器的源代码结构


163编辑器学习笔记_第2张图片

 

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

 

 

163Editor 中:( 163Editor.html

 

 

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

 

打开editor.html,

 

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

 


  

接下去是编辑区域:

 

这是说明几点:

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

 

这里还有一点是:

此处的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编辑器的源代码。

你可能感兴趣的:(web前端开发,浏览器,IE,fckeditor,JavaScript,HTML)