HTML在线编辑器的原理(转载整理)http://www.cnbruce.com/blog/showlog.asp?log_id=1168
2007-11-27 10:58
861 查看
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在线编辑器有哪些
http://www.cnbruce.com/blog/showlog.asp?cat_id=27&log_id=1021
HTML在线编辑器的基本原理
转载自:http://www.lfda.gov.cn/bbsxp/ShowPost.asp?ThreadID=692
看了现在网上流行的在线编辑器,也忍不住想了解一下原理。下了目前应用最广泛的eWebEdit,这个是我见到的最强的开源在线编辑器...研究了一天,终于知道了核心原理。
先解释一下在线编辑器的原理:首先需要IE5.0以上版本的支持。因为IE5.0以上版本有一个编辑状态,可以在一个iframe里面输入文字。然后通过 "document.body.innerHTML"可以获取iframe里面的html代码,这个就是关键。那怎么才能让ifrmae处于编辑状态呢,可以用:
函数实现。剩下的问题就是就是取得焦点和选中的值:
以上2句可以获取选中的值的html代码。
到了这里,基本原理搞清楚了,然后我们可以用 insertHTML("str")方法将html字符替换掉选种的值。以下就给出一个简单的demo来演示只有加粗效果的在线编辑器。我这里用了一个textarea来或得iframe里的html值,实际情况,可以将textarea的display设置成false,然后就可以将iframe的内容提交了。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
function getIframeData(){
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("<b>"+sel.text+"</b>");
}
function insertHTML(html) {
if (HtmlEdit.document.selection.type.toLowerCase() != "none"){
HtmlEdit.document.selection.clear() ;
}
HtmlEdit.document.selection.createRange().pasteHTML(html) ;
}
function document.onreadystatechange()
{
HtmlEdit.document.designMode="On";
}
</script>
</head>
<body>
<form action="test.asp?act=add" method="post" name="form1">
<IFRAME id=HtmlEdit style="WIDTH: 100%; HEIGHT: 296px" marginWidth=0 marginHeight=0>
</IFRAME>
<textarea name="test" rows="10" id="test" style="width:100%;"></textarea>
<br>
<input type="submit" name="Submit" value="提交">
<input type="button" value="iframe->textarea" onClick="getIframeData()">
<input type="button" value="textarea->iframe" onClick="sentIframeData()">
<input type="button" value="B" onClick="doB()">
</form>
</body>
</html>
[Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]
HTML在线编辑器实现原理(兼容IE和FireFox)
转载自:http://www.nextway.cn/default.asp?id=248
首先要有一个编辑框,这个编辑框其实就是一个可编辑状态的网页, 我们用iframe来建立编辑框。
并且在加上javascript代码来指定HtmlEdit有编辑功能:
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要求高
下面是第三点的一个简单例子代码
<iframe MARGINHEIGHT="1" MARGINWIDTH="1" width="400" height="100"></iframe>
<script language="JavaScript">
<!--
//get frame object
frameobj=frames[0];
bodyHtml="<head>/n<style type=/"text/css/">body {font: 10pt verdana;}</style>/n</head>/n<BODY bgcolor=/"#FFFFFF/" MONOSPACE>"
bodyHtml += "<style>/np{margin:0px;padding:0px;}/n</style>/n</body>";
frameobj.document.open();
frameobj.document.write(bodyHtml);
frameobj.document.close();
frameobj.document.designMode="On";
//-->
</script>
[Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]
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在线编辑器有哪些
http://www.cnbruce.com/blog/showlog.asp?cat_id=27&log_id=1021
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(); |
到了这里,基本原理搞清楚了,然后我们可以用 insertHTML("str")方法将html字符替换掉选种的值。以下就给出一个简单的demo来演示只有加粗效果的在线编辑器。我这里用了一个textarea来或得iframe里的html值,实际情况,可以将textarea的display设置成false,然后就可以将iframe的内容提交了。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
function getIframeData(){
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("<b>"+sel.text+"</b>");
}
function insertHTML(html) {
if (HtmlEdit.document.selection.type.toLowerCase() != "none"){
HtmlEdit.document.selection.clear() ;
}
HtmlEdit.document.selection.createRange().pasteHTML(html) ;
}
function document.onreadystatechange()
{
HtmlEdit.document.designMode="On";
}
</script>
</head>
<body>
<form action="test.asp?act=add" method="post" name="form1">
<IFRAME id=HtmlEdit style="WIDTH: 100%; HEIGHT: 296px" marginWidth=0 marginHeight=0>
</IFRAME>
<textarea name="test" rows="10" id="test" style="width:100%;"></textarea>
<br>
<input type="submit" name="Submit" value="提交">
<input type="button" value="iframe->textarea" onClick="getIframeData()">
<input type="button" value="textarea->iframe" onClick="sentIframeData()">
<input type="button" value="B" onClick="doB()">
</form>
</body>
</html>
[Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]
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> |
<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> |
转载自: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要求高
下面是第三点的一个简单例子代码
<iframe MARGINHEIGHT="1" MARGINWIDTH="1" width="400" height="100"></iframe>
<script language="JavaScript">
<!--
//get frame object
frameobj=frames[0];
bodyHtml="<head>/n<style type=/"text/css/">body {font: 10pt verdana;}</style>/n</head>/n<BODY bgcolor=/"#FFFFFF/" MONOSPACE>"
bodyHtml += "<style>/np{margin:0px;padding:0px;}/n</style>/n</body>";
frameobj.document.open();
frameobj.document.write(bodyHtml);
frameobj.document.close();
frameobj.document.designMode="On";
//-->
</script>
[Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]
相关文章推荐
- 不完全HTML在线编辑器收集 http://www.cnbruce.com/blog/showlog.asp?log_id=1021
- 因ARP欺骗网站源文件被注入了代码http://www.cnbruce.com/blog/showlog.asp?cat_id=32&log_id=1191
- 解决ASP(图像)上传漏洞的方法http://www.cnbruce.com/blog/showlog.asp?cat_id=26&log_id=942
- 【转载】【权限控制】角色访问动态生成用户权限菜单树(转载: http://www.comprg.com.cn/post_show.asp?id=7873 )
- MFC 弹出窗口MessageBox的使用[转自http://www.bigasp.com.cn/blog/?action=show&id=51]
- 明基成人礼:巅峰战将营 http://www.cnvn.com.cn/Article/ShowArticle.asp?ArticleID=3172
- VS .NET 2005中水晶报表的使用 http://www.tianyablog.com/blogger/post_show.asp?BlogID=116800&PostID=9731765
- 做了个非常简单的Flash验证码(附源代码) 转载于http://www.cordyblog.cn/?action=show&amp;id=68
- 在线制作漂亮按钮工具http://www.pizipi.cn/blog/article.asp?id=855
- ASP.NET 缓存(七)--根据参数缓存页的版本http://www.opent.cn/?action=show&id=194
- FLex Builder环境 使用 说明 BLOG http://www.akooc.com/article.asp?id=141
- 用Netsh快速切换网络TCP/IP配置(from:http://www.aspxboy.com/private/showthread.asp?postid=419)
- 闭合浮动元素超级简单的方法http://www.jluvip.com/blog/article.asp?id=281
- window.event对象详解 转自【http://www.jluvip.com/blog/article.asp?id=137】
- http://www.kekecn.com/blog/default.asp?CateID=3&page=6
- asp.net控件开发基础 来源:http://www.clingingboy.com/blog/article.asp?id=258
- 强类型DataSet (2011-12-30 23:16:59)转载▼ 标签: 杂谈 分类: Asp.Net练习笔记 http://blog.sina.com.cn/s/blog_9d90c4140101214w.html
- 怎么做gzip压缩(转自:http://www.siviy.com/webnews/newsshow.asp?id=510)
- 常见病毒查杀与防御技巧(from:http://www.ccoo.cn/blog/blogshow.asp?aid=184498)
- ASP.Net设计时需要考虑的性能优化问题 转载自http://blog.sina.com.cn/s/blog_3d7bed650100055p.html