简单的HTML在线编辑器源码_

商学院

简单的HTML在线编辑器源码

董立杰

被约：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
　　<title>无标题页</title>
</head>
<body>
<!——作为编辑区的iframe——>
<iframe style="width: 100%； height:100" marginwidth="0" marginheight="0" frameborder="1" id="MsgFrame"　 src="about:blank"></iframe>
<br />
<input type="button" onclick="t('UnderLine')" value="下划线" />
<input type="button" onclick="t('bold')" value="粗体" id="Button1" />
<input type="button" onclick="t('JustifyLeft')" value="左对齐" />
<input type="button" onclick="t('JustifyCenter')" value="居中对齐" />
<input type="button" onclick="t('JustifyRight')" value="右对齐" />
<input type="button" onclick="t2()" value="增高" />
<input type="button" onclick="t3()" value="减少" />
<input type="button" onclick="ViewSource()" value="查看源代码" />
<script type="text/javascript" language="javascript">
　　//使iframe进入编辑状态。
　　var editor；
　　 editor = document.getElementByIdx("MsgFrame").contentWindow；
// editor = frames["HtmlEdit"]；也可以用这行
　　 editor.document.designMode = 'On'；
　　 editor.document.contentEditable = true；
　　 editor.document.open()；
　　 editor.document.writeln('<html><head>')；
　　 editor.document.writeln("</head><body></body></html>")；
　　 editor.document.onclick = "alert()"；
　　 editor.document.close()；
　　 editor.document.charset="gb2312"；
　　function t(s)
　　 {
　　　　 editor.document.execCommand(s,false,null)；
　　 }
　　//增高
　　function t2(){
　　　　　var obj=window.frames["MsgFrame"].frameElement；
　　　　　
　　　　　var height = parseInt(obj.offsetHeight)；//获取iframe的高度
　　　　　
　　　　　if (height+100 >= 100){
　　　　　　 obj.height = height+100；
　　　　　 }
　　 }
　　//减低
　　function t3(){
　　　　　var obj=window.frames["MsgFrame"].frameElement；
　　　　　
　　　　　var height = parseInt(obj.offsetHeight)；
　　　　　
　　　　　if (height-100 >= 100){
　　　　　　 obj.height = height-100；
　　　　　 }
　　 }
　　function ViewSource(){
　　　　 document.getElementByIdx("textarea1").value = document.getElementByIdx("MsgFrame").contentWindow.document.lastChild.outerHTML；
　　　　 }
</script>
<br/>
<textarea name="textarea1" rows="20" cols="100"></textarea>
</body>
</html>

第二种:
线编辑器在我们日常的项目开发中非常有用（如新闻系统），它可以方便地实现文章的在线编辑，省掉了FrontPage等工具。那么是怎样实现浏览器在线编辑功能的呢?　首先需要IE的支持,在IE5.5以后就有一个编辑状态. 就是利用这个编辑状态,然后用javascript来控制在线编辑的。
　　首先要有一个编辑框，这个编辑框其实就是一个可编辑状态的网页，我们用iframe来建立编辑框。
　　<IFRAME id=“HtmlEdit” style="WIDTH: 100%； HEIGHT: 296px" marginWidth=“0” marginHeight=“0”></IFRAME>

　　并且在加上javascript代码来指定HtmlEdit有编辑功能(下面提供完整的原代码)：
[code]
　 <script language="javascript">
　　var editor；
　　editor = document.getElementByIdx("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()

声明：该文及以下回复观点仅代表作者本人，五略商书系信息发布平台，仅提供信息存储空间服务。
转载请注明作者和出处：转自《五略商书》，作者董立杰！

0人评论，点击参与

	共创江山
	毛毛虫效应、美女效应、门槛效应、
	罗米欧与朱丽叶效应
	临近效应、留面子效应、流言的心理
	库里肖夫效应、冷热水效应、连带效


约课	讲师	学院	发现	我的