简单的HTML在线编辑器源码(支持IE。FireFox)
2007-04-05 10:58
218 查看
<!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.getElementById("MsgFrame").contentWindow;
//window.frames["MsgFrame"].document.designMode="On"
editor.document.open();
editor.document.writeln('<html><head>');
editor.document.writeln("</head><body></body></html>");
editor.document.onclick = "alert()";
editor.document.close();
editor.document.designMode = 'On';
editor.document.contentEditable = true;
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.getElementById("textarea1").value = document.getElementById("MsgFrame").contentWindow.document.lastChild.outerHTML;
}
</script>
<br/>
<textarea name="textarea1" rows="20" cols="100"></textarea>
</body>
</html>
<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.getElementById("MsgFrame").contentWindow;
//window.frames["MsgFrame"].document.designMode="On"
editor.document.open();
editor.document.writeln('<html><head>');
editor.document.writeln("</head><body></body></html>");
editor.document.onclick = "alert()";
editor.document.close();
editor.document.designMode = 'On';
editor.document.contentEditable = true;
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.getElementById("textarea1").value = document.getElementById("MsgFrame").contentWindow.document.lastChild.outerHTML;
}
</script>
<br/>
<textarea name="textarea1" rows="20" cols="100"></textarea>
</body>
</html>
相关文章推荐
- 支持IE和firefox的js代码美化加亮源码
- 简单HTML在线编辑器实现原理(兼容IE和FireFox)(转)
- 简单HTML在线编辑器实现原理(兼容IE和FireFox)(转)
- 支持IE和firefox的js代码美化加亮源码
- ZeroClipboard支持IE,firefox,Chrome复制到剪贴板(转)
- [原](源码)JS OOP 实现页面浮动图片,支持多图同时浮动,简单调用
- PHP+ajax二级联动下拉选择菜单,IE+Firefox浏览器支持
- 雅虎宣布全面支持Firefox,IE不再独霸市场
- js 获取上传图片 全路径,支持ie,firefox
- 让iframe自适应高度(支持xhtml)IE firefox兼容
- 让IE和Firefox都支持innerText(textContent )
- IE 和 FireFox 对 DOM 支持的差异
- 让firefox支持IE的一些属性
- 利用css和js实现firefox和IE都支持的页面局部打印
- javascript实现简单的弹出层以及拖拽功能(支持firefox、IE7.0以上、oprea、chrom)
- 兼容IE,Firefox,CSS3 opacity透明度-FireFox 3.5+不支持-moz-opacity属性
- 通过javascript将input输入框的值复制拷贝到剪贴板clipboard,支持ie,firefox
- js 右键菜单,支持不同对象不同菜单(兼容IE、Firefox)
- 图片放大镜的js实现,支持IE和Firefox
- js 复制到剪贴板 ,兼容支持火狐firefox 和 ie