163的在线编辑器简析和配置使用

    
 fck的功能确实很多,这个163的编辑器也是小网站不错的选择。
附件中有163编辑器的源代码。

163Editor 编辑器概览
 

163的在线编辑器简析和配置使用_第1张图片

     编辑器的源代码结构
 

代码结构

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

打开editor.html,
 

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

 

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

接下去是编辑区域:

  
  
  
  
  1. <div id="divEditor"
  2.               <SCRIPT LANGUAGE="JavaScript"
  3.                   <!-- 
  4.                  if (document.all) { 
  5.                       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=\'#\'" /IFRAME></td></tr></table>'); 
  6.                   } 
  7.                   else { 
  8.                       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=\'#\'" /IFRAME></td></tr></table>'); 
  9.                   } 
  10.                  //--> 
  11.               </SCRIPT> 
  12.          </div> 
  13.          <SCRIPT LANGUAGE="JavaScript"
  14.              <!-- 
  15.              if (document.all) { 
  16.                  document.write('<textarea ID="sourceEditor" style="height:280px;width:100%;display:none">'); 
  17.              } 
  18.              else { 
  19.                  document.write('<textarea ID="sourceEditor" style="height:282px;width:100%;display:none">'); 
  20.              } 
  21.               
  22.              //--> 
  23.           </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中的全局变量:
 

  
  
  
  
  1. var gSetColorType = "";  
  2.       //document.all是ie浏览器特有的属性  gIsIE用于判断当前浏览器是否是IE 
  3. var gIsIE = document.all;  
  4. var gIEVer = fGetIEVer();     //获取当前使用的IE的version 
  5. //页面是否全部加载完毕,包括所有图片和文字。    
  6. //gLoaded的属性在window.onload = function(){……}执行后变为true     
  7. var gLoaded = false;           
  8. var ev = null
  9.  
  10. 入口函数: 
  11. /* 
  12.  * 当前页面中的全部内容都加载完毕后,执行这个函数 
  13.  */ 
  14. window.onload = function() 
  15.     try
  16.         gLoaded = true;      //把这个量的值改成true,表示页面已经加载完毕了 
  17.         fSetEditable();      //把页面上的指定的iframe变成编辑模式 
  18.         fSetFrmClick();          
  19.         ResetDomain();     
  20.         fSetHtmlContent(); 
  21.         top.frames["jsFrame"].fHideWaiting(); 
  22.     } 
  23.     catch(e) 
  24.     { 
  25.         // window.location.reload(); 
  26.     } 

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

如 163Editor中:(163Editor.html)


 

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

 

你可能感兴趣的:(代码,休闲,FCK,简析,163编辑器)