>
设为首页
>
收藏本站
>
最新电影
首页
运营资讯
今日英语
图形图像
计算机技术
Asp编程
网站结构化
资源共享
休闲娱乐
访问新站
您现在的位置:
首页
=>
后台技术
=>
脚本特效
=>
其他
订阅本栏目
在线HTML编辑器原理 eweb原理
时间: 2008-11-04 15:05:00 阅读次数:2883
为什么能实现在线编辑呢? 首先需要ie 的支持,在 ie 5.5以后就有一个编辑状态,就是利用这个编辑状态,然后用javascript 来控制在线编辑的。
下面给出一个简短的例子: 首先要有一个编辑框,这个编辑框其实就是一个 可编辑状态的 网页,我们这里用iframe 来建立编辑框
<IFRAME id=HtmlEdit style="WIDTH: 100%; HEIGHT: 296px" marginWidth=0 marginHeight=0>
</IFRAME>
飞飞Asp技术乐园
并且在 加上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>
提示:您可以先修改部分代码再运行
飞飞Asp技术乐~园
站内搜索
:
标题
内容
下一篇
飞飞input表单输入框默认提示信息插件
上一篇
用键盘打开网页代码
本栏目最新
栏目最新列表
xhEditor v1.1.7 发布,国产开源XHTML在线编
收集的一些轻量级非常实用的前端开发小工具
javascript中cookie的设置,读取,删除
jquery插件:飞飞表情插件v1.0_[普通表情/魔
Jquery插件:textarea使用“autoresize”自
网站优化策划
栏目最新列表
增加网站外链的快速方法
网站上线前必做的30个检查
新的友情链接参考标准(没有google的PR情况
优化Google的AdSense广告的五个工具
王通讲SEO八大基础
站点最新
站点最新列表
微博推广的一些技巧
xhEditor v1.1.7 发布,
收集的一些轻量级非常实
50个新鲜兼容最新版本的
javascript中cookie的设
Excel中出现#VALUE!、#D
jquery插件:飞飞表情插件
十个使用HTML5开发的精彩
支持HTML5的浏览器有哪些
飞妮莫属:漫画:如何写出
历史最热10条信息
MIME介绍 及
[
1
] [
2
] [
3
]
巧用Google和迅雷来下载
VIA Rhine II Fast Ethe
Transact SQL 常
[
1
] [
2
]
电脑常用端
[
1
] [
2
] [
3
]
十道羊皮卷 欣赏+mp3版+
Do you get a kick out
每日一句:A friend and
每日一句:Theres no tu
网站开发常用手册
伟哥博客
西安房产
123最新电影
三四六四
关于站点
|
免责声明
|
联系站长
|
网站地图
|
陕ICP备07002804号
WEB技术QQ交流群:72840059
©2007 ffasp.com. 版权所有