2022年HTML在线编辑器原理 .pdf

《2022年HTML在线编辑器原理 .pdf》由会员分享，可在线阅读，更多相关《2022年HTML在线编辑器原理 .pdf（6页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、HTML 在线编辑器原理(2010-04-07 14:18:14)转载标签：it基础：1.什么是 HTML 在线编辑器?顾名思义，HTML 在线编辑器就是用于在线编辑的工具，编辑的内容是基于HTML的文档。（注：这定义是我自下的，不知是否正确。）2.HTML在线编辑器有什么用？因为 HTML 在线编辑器可用于在线编辑基于HTML 的文档，所以，它经常被用于留言板留言、论坛发贴、Blog 编写日志或等需要用户输入普通HTML 的地方。3.什么是 DHTML?DHTML是一些现有网页技术与标准的整合，通过它，网页设计可以用一种新的方式创建网页。4.DHTML 与 HTML 关系 DHTML是以 H

2、TML 语言为基础，但是相较于以单纯的HTML 来设计网页的方法，HTML 所带来的最大转变，在于它加入了“对象化”的网页特征。动态HTML 对象模型定义了用于描述网页及其内部元素的对象，每个对象都有描述其自身状态的属性和描述其行为的方法，它们也可以处理特定类型的事件，因此，网页设计者可以通过Scipt 程序来控制或调用这些对象。5.DHTML 与 HTML 在线编辑器的关系要做在线编辑器就需要用到DHTML，因为 HTML 在线编辑器要能在线地编辑，需要“动态”地改变网页对象的属性，而DHTML 正好满足了这个需要。6.JScript是什么？JScript 是一种解释型的、基于对象的脚本语言

3、。尽管与 C+这样成熟的面向对象的语言相比，JScript 的功能要弱一些，但对于它的预期用途而言，JScript 的功能已经足够大了。正文：下面我将通过一个简单的实例（允许用户输入文本及使选中文本产生加粗、倾斜、添加下划线等效果，并可以提交给数据库存储）来阐述HTML 在线编辑器的原理。1、创建一个编辑区域新建一个：注：是 DHTML 的一个对象，它的作用是创建内嵌浮动框架。此时这个编辑区域还不能用于编辑。名师资料总结-精品资料欢迎下载-名师精心整理-第 1 页，共 6 页 -2、调用 javascipt开启 的编辑功能：window.framesx.document.designMode=

4、On;/注：disignMode 标识浮动框架是否允许输入。3.加入一个处理函数Format，用于用于处理编辑框中选中文本的属性:function format(hc,pa)window.framesx.focus;/浮动框架取得焦点 window.framesx.document.selection.createRange();/为当前选择的文本创建一个 TextRange 对象,即获取当前所选择的文本。window.framesx.document.execCommand(hc,false,pa);/为当前选择文本执行excecCommand 方法,即为当前选择的文本执行一个命令,hc 代

5、表是什么命令，false不显示用户界面，为 true 时，如果命令支持时，将显示一个用户界面，pa表示命令的参数 4.创建一个表单，表单包括编辑按钮：加粗、倾斜、添加下划线等按钮，分别在 Onclick 事件发生时调用 format 函数。/隐藏域 Content,用于获取用户编辑的文本HTML 源代码。/提交处理 5.创建提交处理函数:OnSubmit(),用于当用户点击提交按钮时，获取文本的 HTML 源代码并赋值给隐藏域content 后提交单到数据库处理页面。function OnSubmit()document.form1.content.value=framesx.document

6、.body.outerHTML;/outerHTML 属性表示设置或获取对象及其内容的 HTML 形式 if(document.form1.content.value=)alert(内容不能为空!);else document.form1.submit();/提交表单 就是这样，一个简单的HTML 在线编辑就完成了，很简单吧。总结：名师资料总结-精品资料欢迎下载-名师精心整理-第 2 页，共 6 页 -综上所述，要做一个HTML 在线编辑器，应该对 HTML、DHTML、JScipt、动态网页技术等有一定的理解。其中关键在于：对象方法 execCommand()，通过它能改变编辑对象的各种属性

7、，从而产生多种多样的效果。1，什么是 HTML 在线编辑器顾名思义，在线编辑器就是用于在线编辑的工具，编辑的内容是基于HTML 的文档。2，HTML 在线编辑器有什么用？因为 HTML 在线编辑器可用于在线编辑基于HTML 的文档，所以，它经常被用于留言板留言、论坛发贴、Blog 编写日志或等需要用户输入普通HTML 的地方。3，什么是 DHTML DHTML 是一些现有网页技术与标准的整合，通过它，网页设计可以用一种新的方式创建网页。4，DHTML 与 HTML 关系DHTML 是以 HTML 语言为基础，但是相较于以单纯的HTML 来设计网页的方法，HTML 所带来的最大转变，在于它加入了

8、“对象化”的网页特征。动态 HTML对象模型定义了用于描述网页及其内部元素的对象，每个对象都有描述其自身状态的属性和描述其行为的方法，它们也可以处理特定类型的事件，因此，网页设计者可以通过 Script程序来控制或调用这些对象。5，DHTML 与 HTML 在线编辑器的关系要做在线编辑器就需要用到DHTML，因为 HTML 在线编辑器要能在线地编辑，需要“动态”地改变网页对象的属性，而DHTML 正好满足了这个需要。HTML 在线编辑器有哪些http:/ HTML 在线编辑器的基本原理转载自：http:/ 看了现在网上流行的在线编辑器，也忍不住想了解一下原理。下了目前应用最广泛的 eWebEd

9、it，这个是我见到的最强的开源在线编辑器.研究了一天，终于知道了核心原理。先解释一下在线编辑器的原理：首先需要IE5.0 以上版本的支持。因为IE5.0以上版本有一个编辑状态，可以在一个iframe 里面输入文字。然后通过document.body.innerHTML 可以获取 iframe 里面的 html 代码，这个就是关名师资料总结-精品资料欢迎下载-名师精心整理-第 3 页，共 6 页 -键。那怎么才能让ifrmae 处于编辑状态呢，可以用：function document.onreadystatechange()HtmlEdit.document.designMode=On;函数实

10、现。剩下的问题就是就是取得焦点和选中的值：HtmlEdit.focus();var sel=HtmlEdit.document.selection.createRange();以上 2 句可以获取选中的值的html 代码。到了这里，基本原理搞清楚了，然后我们可以用 insertHTML(str)方法将html 字符替换掉选种的值。以下就给出一个简单的demo来演示只有加粗效果的在线编辑器。我这里用了一个 textarea来或得 iframe 里的 html 值，实际情况，可以将 textarea的 display设置成 false，然后就可以将iframe 的内容提交了。function ge

11、tIframeData()document.form1.test.value=HtmlEdit.document.body.innerHTML;function sentIframeData()HtmlEdit.document.body.innerHTML=document.form1.test.value;function doB()HtmlEdit.focus();var sel=HtmlEdit.document.selection.createRange();insertHTML(+sel.text+);function insertHTML(html)if(HtmlEdit.doc

12、ument.selection.type.toLowerCase()!=none)HtmlEdit.document.selection.clear();HtmlEdit.document.selection.createRange().pasteHTML(html);function document.onreadystatechange()HtmlEdit.document.designMode=On;textarea iframe Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行 HTML 在线编辑器实现原理(兼容 IE 和 FireFox)名师资料总结-精品资料欢迎下载

13、-名师精心整理-第 4 页，共 6 页 -转载自：http:/ 首先要有一个编辑框，这个编辑框其实就是一个可编辑状态的网页，我们用iframe 来建立编辑框。并且在加上 javascript代码来指定 HtmlEdit有编辑功能：var editor;editor=document.getElementByIdx(HtmlEdit).contentWindow;/只需键入以下设定，iframe 立刻变成编辑器。editor.document.designMode=On;editor.document.contentEditable=true;/但是 IE 与 FireFox 有点不同，为了兼容

14、FireFox，所以必须创建一个新的document。editor.document.open();editor.document.writeln();editor.document.close();/字体特效 加粗方法一function addBold()editor.focus();/所有字体特效只是使用execComman()就能完成。editor.document.execCommand(Bold,false,null);/字体特效 加粗方法二function addBold()editor.focus();/获得选取的焦点var sel=editor.document.selecti

15、on.createRange();insertHTML(+sel.text+);function insertHTML(html)名师资料总结-精品资料欢迎下载-名师精心整理-第 5 页，共 6 页 -if(editor.document.selection.type.toLowerCase()!=none)editor.document.selection.clear();editor.document.selection.createRange().pasteHTML(html);WEB 在线编辑器原理转载自：http:/ 从 eWebEditor 到 FCKeditor现在有很多很多的在

16、线编辑器了，功能都很强，很多，但是其基本原理却都很简单我发现的编辑器主要有3 大类，我总结下，把各自的优缺点都写下直接用 textarea 标签优点：速度快，提交方便，可以用UBB标签来弥补不能所见所得缺点：不直观，功能非常少用 DIV 或者 TABLE 的 CONTENTEDITABLE 标签，属性来让一个区域可以编辑优点：可以很直观，可以做各种效果缺点：此标签在 mozilla下不可用，只适合IE 浏览器，且对 js 要求高用 iframe 或者 frame 的中的 document的 document.designMode=On 来实现可编辑优点：具有上面第二条的全部优点，并且还多浏览器

17、比如FF等支持缺点：对 js 要求高下面是第三点的一个简单例子代码 !-/get frame object frameobj=frames0;bodyHtml=nbody font:10pt verdana;nn bodyHtml+=npmargin:0px;padding:0px;nn;frameobj.document.open();frameobj.document.write(bodyHtml);frameobj.document.close();frameobj.document.designMode=On;/-Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行 名师资料总结-精品资料欢迎下载-名师精心整理-第 6 页，共 6 页 -