[会员中心]  [发布文章][发布软件]  [中文繁體] 
 文章·资料  电脑软件  手机软件  网站源码
   本 站 搜 索
[选项]
   推 荐 文 章       More...
华硕易电脑(ASUS Eee PC 1025C)驱动程序(Windows XP)安装参考(图) 华硕易电脑(ASUS Eee PC 1025C..
先来段开场白:为了外出携带方便..
Acronis True Image 使用说明 Acronis True Image 使用说明
  一款可以在Windows下使用..
Norton Ghost 使用详解 Norton Ghost 使用详解
一、分区备份   使用Ghost..
   阅 读 排 行
“.com”域名新发现 “.com”域名新发现
  尽管这不是什么秘密,但也许..
Windows 10 的 LTSB 和 LTSC 版本区别 Windows 10 的 LTSB 和 LTSC 版..
在 Windows 10 系统众多版本中,..
fieldset 和 legend 标签的属性和使用方法 fieldset 和 legend 标签的属性..
fieldset除了可以用style设定他..
Cisco PIX防火墙配置 Cisco PIX防火墙配置
摘要:本文讲述了作者第一次亲手..
Windows 系统安装或备份时 ISO,GHO,WIM,ESD,PMF 都是什么文件类型 Windows 系统安装或备份时 ISO,GH..
【ISO 文件】 ISO 文件其实就..
Microsoft Office Excel 2007 打开 Excel 2003 创建的文件在筛选时出现卡顿的解决方法 Microsoft Office Excel 2007 打..
  Microsoft Office Excel 2007..
ASP如何获取客户端真实IP地址 ASP如何获取客户端真实IP地址
  在 ASP 中使用 Request.Serve..
Base64 编码在线加密 Base64 编码在线加密
> 2); out += bas..
文 章 信 息
在线HTML编辑器原理
评论()][留言][收藏
[文章分类:电脑·手机·网络 / 网站设计·开发·优化][阅读选项
    为什么能实现在线编辑呢?  首先需要ie 的支持,在 ie 5.5以后就有一个编辑状态,就是利用这个编辑状态,然后用javascript 来控制在线编辑的。
下面给出一个简短的例子: 
首先要有一个编辑框,这个编辑框其实就是一个 可编辑状态的 网页,我们这里用iframe 来建立编辑框

<IFRAME id=HtmlEdit style="WIDTH: 100%; HEIGHT: 296px" marginWidth=0 marginHeight=0></IFRAME>

并且在 加上javascript 代码来指定 HtmlEdit 有编辑功能:

function document.onreadystatechange(){
 HtmlEdit.document.designMode="On";
}

HtmlEdit.document.body.innerHTML  这句可以获得 HtmEdit 里面的html代码. 一般的我们会用这样的javascript 将 iframe 里的内容传递给一个textarea 然后提交给服务器处理.

function getIframeData(){
 document.form1.test.value=HtmlEdit.document.body.innerHTML;
}
function sentIframeData(){
 HtmlEdit.document.body.innerHTML=document.form1.test.value;
}

var sel = HtmlEdit.document.selection.createRange(); 而这一句可以获得选取的焦点:

下面我就演示一个完成的例子. 一个拥有加粗功能的在线编辑器,有兴趣的朋友可以在此基础上完成其他功能!!

<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> 

文章作者:未知  更新日期:2006-09-07
[文章浏览:][打印文章][发送文章
阅读说明
·本站大部分文章转载于网络,如有侵权请留言告知,本站即做删除处理。
·本站法律法规类文章转载自[中国政府网(www.org.cn)],相关法律法规如有修订,请浏览[中国政府网]网站。
·本站转载的文章,不为其有效性,实效性,安全性,可用性等做保证。
·如果有什么问题,或者意见建议,请联系[网站管理员]
  原“浪人文章”和“浪人下载”网站已合并为“老若尔文章软件站”,域名:https://lre.cn
  本站使用【啊估文章软件站】网站系统    网站管理员留言簿〗〖捐助     闽ICP备08009617号