html编辑doc,HTML在线编辑器原理.doc

HTML在线编辑器原理

HTML在线编辑器原理

HTML在线编辑器原理2010-04-07 10：47基础：1.什么是HTML在线编辑器?

顾名思义，HTML在线编辑器就是用于在线编辑的工具，编辑的内容是基于HTML的文档。(注：这定义是我自下的，不知是否正确。)2.HTML在线编辑器有什么用?

因为HTML在线编辑器可用于在线编辑基于HTML的文档，所以，它经常被用于留言板留言、论坛发贴、Blog编写日志或等需要用户输入普通HTML的地方。3.什么是DHTML?DHTML是一些现有网页技术与标准的整合，通过它，网页设计可以用一种新的方式创建网页。4.DHTML与HTML关系DHTML是以HTML语言为基础，但是相较于以单纯的HTML来设计网页的方法，HTML所带来的最大转变，在于它加入了"对象化"的网页特征。动态HTML对象模型定义了用于描述网页及其内部元素的对象，每个对象都有描述其自身状态的属性和描述其行为的方法，它们也可以处理特定类型的事件，因此，网页设计者可以通过Scipt程序来控制或调用这些对象。5.DHTML与HTML在线编辑器的关系

要做在线编辑器就需要用到DHTML，因为HTML在线编辑器要能在线地编辑，需要"动态"地改变网页对象的属性，而DHTML正好满足了这个需要。6.JScript是什么?JScript是一种解释型的、基于对象的脚本语言。尽管与C++这样成熟的面向对象的语言相比，JScript的功能要弱一些，但对于它的预期用途而言，JScript的功能已经足够大了。正文：下面我将通过一个简单的实例(允许用户输入文本及使选中文本产生加粗、倾斜、添加下划线等效果，并可以提交给数据库存储)来阐述HTML在线编辑器的原理。1、创建一个编辑区域--新建一个iframe：iframe id="x"height="200px"width="500px"SCROLLING="yes"canHaveHTML/iframe注：iframe是DHTML的一个对象，它的作用是创建内嵌浮动框架。此时这个编辑区域还不能用于编辑。2、调用javascipt开启iframe的编辑功能：script language="javascript"window.frames["x"].document.designMode="On"；/script//注：disignMode标识浮动框架是否允许输入。3.加入一个处理函数Format，用于用于处理编辑框中选中文本的属性：script language="javascript"function format(hc,pa){window.frames["x"].focus；//浮动框架取得焦点window.frames["x"].document.selection.createRange()；//为当前选择的文本创建一个TextRange对象,即获取当前所选择的文本。window.frames["x"].document.execCommand(hc,false,pa)；//为当前选择文本执行excecCommand方法,即为当前选择的文本执行一个命令,hc代表是什么命令，false不显示用户界面，为true时，如果命令支持时，将显示一个用户界面，pa表示命令的参数}/script 4.创建一个表单，表单包括编辑按钮：加粗、倾斜、添加下划线等按钮，分别在Onclick事件发生时调用format函数。form id="form1"name="form1"method="post"action="Submit_proc.asp"input type="button"name="Submit"value="_"/input type="button"name="Bold"value="粗"/input type="button"name="Italic"value="斜"/input name="content"type="hidden"id="content"///隐藏域Content,用于获取用户编辑的文本HTML源代码。input name="Submit"type="button"id="Submit"value="提交"///提交处理5.创建提交处理函数：OnSubmit(),用于当用户点击提交按钮时，获取文本的HTML源代码并赋值给隐藏域content后提交单到数据库处理页面。function OnSubmit(){document.form1.content.value=frames["x"].document.body.outerHTML；//outerHTML属性表示设置或获取对象及其内容的HTML形式if(document.form1.content.value=="")alert("内容不能为空！")；