在线HTML编辑器原理（实例演示）

最新推荐文章于 2024-07-24 16:53:23 发布

加油馒头

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量2.9k

点赞数

文章标签： html function javascript iframe button input

为什么能实现在线编辑呢? 首先需要ie 的支持，在 ie 5.5以后就有一个编辑状态，就是利用这个编辑状态,然后用javascript 来控制在线编辑的。下面给出一个简短的例子：

首先要有一个编辑框，这个编辑框其实就是一个可编辑状态的网页，我们这里用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>

加油馒头

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
在线HTML编辑器原理（实例演示）

为什么能实现在线编辑呢? 首先需要ie 的支持，在 ie 5.5以后就有一个编辑状态，就是利用这个编辑状态,然后用javascript 来控制在线编辑的。下面给出一个简短的例子：首先要有一个编辑框，这个编辑框其实就是一个可编辑状态的网页，我们这里用iframe 来建立编辑框并且在加上javascript 代码来指定 HtmlEdit 有编辑功能:func
复制链接

扫一扫