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="_"  onclick="format('UnderLine','')"/>
        <input type="button" name="Bold" value="粗" onclick="format('bold','')" />
         <input type="button" name="Italic" value="斜" onclick="format('italic','')" />
      
         <input name="content" type="hidden" id="content" />// 隐藏域Content,用于获取用户编辑的文本HTML源代码。
          <input name="Submit" type="button" id="Submit" onclick="OnSubmit()" 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();//提交表单
           }
      就是这样，一个简单的HTML在线编辑就完成了，很简单吧。

总结：
        综上所述，要做一个HTML在线编辑器， 应该对HTML、DHTML、JScipt、动态网页技术等有一定的理解。其中关键在于：对象方法execCommand()，通过它能改变编辑对象的各种属性，从而产生多种多样的效果。