HTML在线编辑器的原理分析(整理)
作者:cnbruce 来源:CNBRUCE'S BLOG 发布时间:2007-12-22 10:25:00
当然如果想了解更多编辑器的原理制作方法,只有你自己去下载一个在线编辑器,慢慢研究,相信会有更多的收获!
HTML在线编辑器的基本概念
1,什么是HTML在线编辑器
顾名思义,在线编辑器就是用于在线编辑的工具,编辑的内容是基于HTML的文档。
2,HTML在线编辑器有什么用?
因为HTML在线编辑器可用于在线编辑基于HTML的文档,所以,它经常被用于留言板留言、论坛发贴、Blog编写日志或等需要用户输入普通HTML的地方。
3,什么是DHTML
DHTML是一些现有网页技术与标准的整合,通过它,网页设计可以用一种新的方式创建网页。
4,DHTML与HTML关系
DHTML是以HTML语言为基础,但是相较于以单纯的HTML来设计网页的方法,HTML所带来的最大转变,在于它加入了“对象化”的网页特征。动态HTML对象模型定义了用于描述网页及其内部元素的对象,每个对象都有描述其自身状态的属性和描述其行为的方法,它们也可以处理特定类型的事件,因此,网页设计者可以通过Script程序来控制或调用这些对象。
5,DHTML与HTML在线编辑器的关系
要做在线编辑器就需要用到DHTML,因为HTML在线编辑器要能在线地编辑,需要“动态”地改变网页对象的属性,而DHTML正好满足了这个需要。
HTML在线编辑器有哪些
https://www.aspxhome.com/program/2007/2292.htm
HTML在线编辑器的基本原理
转载自:http://www.lfda.gov.cn/bbsxp/ShowPost.asp?ThreadID=692
看了现在网上流行的在线编辑器,也忍不住想了解一下原理。下了目前应用最广泛的eWebEdit,这个是我见到的最强的开源在线编辑器...研究了一天,终于知道了核心原理。
先解释一下在线编辑器的原理:首先需要IE5.0以上版本的支持。因为IE5.0以上版本有一个编辑状态,可以在一个iframe里面输入文字。然后通过 "document.body.innerHTML"可以获取iframe里面的html代码,这个就是关键。那怎么才能让ifrmae处于编辑状态呢,可以用:
function document.onreadystatechange()
{
HtmlEdit.document.designMode="On";
}
函数实现。剩下的问题就是就是取得焦点和选中的值:
HtmlEdit.focus();
var sel = HtmlEdit.document.selection.createRange();
以上2句可以获取选中的值的html代码。
到了这里,基本原理搞清楚了,然后我们可以用 insertHTML("str")方法将html字符替换掉选种的值。以下就给出一个简单的demo来演示只有加粗效果的在线编辑器。我这里用了一个textarea来或得iframe里的html值,实际情况,可以将textarea的display设置成false,然后就可以将iframe的内容提交了。
[提示:你可先修改部分代码,再按运行]
HTML在线编辑器实现原理(兼容IE和FireFox)
转载自:http://www.nextway.cn/default.asp?id=248
首先要有一个编辑框,这个编辑框其实就是一个可编辑状态的网页, 我们用iframe来建立编辑框。
<IFRAME id=“HtmlEdit” style="WIDTH: 100%; HEIGHT: 296px" marginWidth=“0” marginHeight=“0”></IFRAME>
并且在加上javascript代码来指定HtmlEdit有编辑功能:
<script language="javascript">
var editor;
editor = document.getElementById("HtmlEdit").contentWindow;
//只需键入以下设定,iframe立刻变成编辑器。
editor.document.designMode = 'On';
editor.document.contentEditable = true;
//但是IE与FireFox有点不同,为了兼容FireFox,所以必须创建一个新的document。
editor.document.open();
editor.document.writeln('<html><body></body></html>');
editor.document.close();
//字体特效 - 加粗方法一
function addBold()
{
editor.focus();
//所有字体特效只是使用execComman()就能完成。
editor.document.execCommand("Bold", false, null);
}
//字体特效 - 加粗方法二
function addBold()
{
editor.focus();
//获得选取的焦点
var sel = editor.document.selection.createRange();
insertHTML("<b>"+sel.text+"</b>");
}
function insertHTML(html)
{
if (editor.document.selection.type.toLowerCase() != "none")
{
editor.document.selection.clear() ;
}
editor.document.selection.createRange().pasteHTML(html) ;
}
</script>
WEB在线编辑器原理
转载自:http://blog.fhuang.com/article.asp?id=239
从eWebEditor到 FCKeditor现在有很多很多的在线编辑器了,功能都很强,很多,但是其基本原理却都很简单
我发现的编辑器主要有3大类,我总结下,把各自的优缺点都写下
直接用textarea 标签
优点:速度快,提交方便,可以用UBB标签来弥补不能所见所得
缺点:不直观,功能非常少
用 DIV或者TABLE的CONTENTEDITABLE 标签,属性来让一个区域可以编辑
优点:可以很直观,可以做各种效果
缺点:此标签在mozilla下不可用,只适合IE浏览器,且对js要求高
用iframe或者frame的中的document的document.designMode ="On" 来实现可编辑
优点:具有上面第二条的全部优点,并且还多浏览器比如FF等支持
缺点:对js要求高
下面是第三点的一个简单例子代码
[提示:你可先修改部分代码,再按运行]
猜你喜欢
- 依次前移,实现聊友们的发言的更迭:function form1_onsubmit()if document.form1.
- 本文更多将会介绍三思在日常中经常会用到的,或者虽然很少用到,但是感觉挺有意思的一些函数。分二类介绍,分别是: 著名函数篇-经常用到的函数 非
- <%'***********************************************'函数
- 数据列类型与查询效率选用适当的数据列类型有助于提高查询命令的执行速度,下面是几点关于如何选择合适数据列类型的建议:尽量选用尺寸较小的数据列。
- 1,FCKeditor 编辑器最新版本: 2.3.1站点:http://www.fckeditor.net 演示:http://w
- 下面列出了asp远程网页数据采集程序中经常用到的函数,很实用,特别是正则表达式过滤函数。包括了使用xmlhttp采集远程网页内容,使用ado
- 好久没有更新博客了,今天看到论坛上有位朋友问起全屏布局,有点像vc的界面。来了兴趣,就写了一个。运用IE6的怪异模式,通过绝对定位来实现的。
- 去空格函数有如下两种:·LTRIM()LTRIM() 函数把字符串头部(左)的空格去掉,其语法如下:LTRIM (<character
- 或许马上,或许几年之后,但是有迹象显示IE浏览器占统治地位的时代即将结束。在数据分析公司Net Applications的排名中,IE的市场
- 1.如何在网页中插入空格 我们在用Dreamweaver的所见即所得编辑模式下编辑中文网页时,往往需要
- 如何准确获知对方来访问的时间和URL?代码如下:logfile.asp<%Dim ValidLog '&n
- 如IP为192.168.1.111现要截取第二个.之前的值,得到结果192.168,很多网站都只显示前面2个值 &nb
- 【MySql常用命令】1:使用SHOW语句找出在服务器上当前存在什么数据库:mysql> SHOW DATABASES;2:创建一个数
- 微软上周发布了一份关于 Windows Internet Explorer 8 浏览器(以下简称为 IE 8)性能优化的白皮书《Window
- Response是负责将信息传递给用户的对象,它可动态地响应客户端的请求,并将动态生成的响应结果返回给客户端浏览器。 一,Resp
- 减少HTTP请求,是可以提高网站速度的,把所有的背景图像都放到一个图片文件中,然后通过CSS的background-image和backgr
- 另:@会影响效率如:@mysql_connect() 可以导出错误,但会影响效率。mysql与mysqli的区别:
- CSS文件的链接方式·附加链接:外部CSS文件·导入CSS:常用应用多个CSS文件时,将多个CSS导入一个CSS文件中CSS规则定义有三种:
- 在工作中,作为一名开发者的你,也许偶尔需要从事维护数据库的工作。下面我们来介绍一下两个SQL服务器的维护技巧:轻松改变数据库拥有者、整理索引
- 你是否对获得MySQL数据库与表的最基本命令的实际操作感到十分头疼?如果是这样子的话,以下的文章将会给你相应的解决方案,以下的文