[会员中心]  [发布文章][发布软件]  [中文繁體] 
 文章·资料  电脑软件  手机软件  网站源码
   本 站 搜 索
[选项]
   推 荐 文 章       More...
华硕易电脑(ASUS Eee PC 1025C)驱动程序(Windows XP)安装参考(图) 华硕易电脑(ASUS Eee PC 1025C..
先来段开场白:为了外出携带方便..
Acronis True Image 使用说明 Acronis True Image 使用说明
  一款可以在Windows下使用..
Norton Ghost 使用详解 Norton Ghost 使用详解
一、分区备份   使用Ghost..
   阅 读 排 行
Windows 系统安装或备份时 ISO,GHO,WIM,ESD,PMF 都是什么文件类型 Windows 系统安装或备份时 ISO,GH..
【ISO 文件】 ISO 文件其实就..
使用“自动点击器”APP 在抖音直播间自动点赞 使用“自动点击器”APP 在抖音直..
看过抖音直播的朋友都知道,进入..
OPPO 手机的锁屏时间设置成横向显示 OPPO 手机的锁屏时间设置成横向..
第一次使用 OPPO 手机,桌面和锁..
电脑机箱(主板)前面板 USB 数据线的接线参考(图) 电脑机箱(主板)前面板 USB 数据..
  一、概述   因为每个 US..
抖音直播录屏的草稿保存位置 抖音直播录屏的草稿保存位置
抖音直播录屏,保存为“草稿”后,..
微信收到 flv 格式视频,如何播放? 微信收到 flv 格式视频,如何播放?
  微信上收到一个 flv 格式视频..
TrustAsia/DigiCert/Let s Encrypt 的免费 SSL 证书,多款网页浏览器都无法正常打开 TrustAsia/DigiCert/Let s Encryp..
云服务器安装了 Windows Server 2..
三星打印机(SCX-4521)提示“墨粉不足”设置 三星打印机(SCX-4521)提示“墨粉..
  三星打印机(SCX-4521)在添加..
文 章 信 息
在线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号