163编辑器学习笔记

radovi

浏览: 64642 次
性别:
来自: 杭州

最近访客更多访客>>

qq2466714892

xiaozr2

就让我矫情到死吧

炙焰燃烧

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前端开发

浏览器 IE fckeditor JavaScript HTML

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

163Editor.rar (18.8 KB)
下载次数: 784

查看图片附件

分享到：

递归有好有坏的……

2009-10-25 20:40
浏览 1845
评论(7)
论坛回复 / 浏览 (7 / 8868)
查看更多

7 楼 395003679 2010-03-24

请问楼主，测试过没！为什么我在JSP 页面引用时
<iframe src="<c:url value='/webapp/js/HtmlEditor163/editor.html?id=desc1'/>" frameborder="0" scrolling="no" width="700" height="320"></iframe>
这个默认的高度不能调小呀？~ 一调小就没用了

6 楼天空之城 2009-12-16

163编辑器界面很简洁，要是能支持本地上传就好了。

5 楼 lifesinger 2009-11-04

kindeditor 的确不错，国产中看到如此精品，佩服

4 楼 01404421 2009-11-04

FCKEditor我一直在用，应该是功能最强大的编辑器了，可以自定义显示风格和多达一百多个配置项目，可以上传图片和在服务器上选择图片，支持多种后台，推荐LZ试用一下

3 楼 java_mike 2009-11-02

KindEditor编辑器挺好的，推荐下。
http://www.kindsoft.net/demo.php

2 楼 makemyownlife 2009-11-02

163编辑器也曾经研究过，在firefox下貌似有问题，不知道楼主发现了没？
里面的代码我觉得结构并不是很清晰，有很多可以完善的地方，个人浅见。

1 楼 turionboy 2009-11-01

163的看起来是比较简洁，但是我感觉并不是很爽，前一段时间有兄弟弄了一个新浪的编辑器，看起来很不错，楼主可以看一下。
http://www.iteye.com/topic/213151

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论