HTML在线编辑原器理简单深入.docxVIP

HTML在线编辑器原理转载基础：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(内容不能为空!); else document.form1.submit();