在线编辑器原理-兼容各种浏览器

最新推荐文章于 2024-08-09 06:13:01 发布

weixin_34099526

最新推荐文章于 2024-08-09 06:13:01 发布

阅读量79

点赞数

文章标签： xhtml python javascript ViewUI

原文链接：https://my.oschina.net/guanyue/blog/181531

版权

2019独角兽企业重金招聘Python工程师标准>>>

最近因为工作原因，需要一个所见即所得的编辑器，功能不需要太强大，够用就行。在网上搜索了下，有好几种解决方案，结合我自己的情况，最终选择了iframe，修改了下网上的代码，简单的测试代码也贴出来。自己存档，也希望对大家有帮助。兼容IE6,IE7，IE8，firefox，chrome。

<h2>第一部分：设置一个可编辑的iframe。</h2> 1.首先网页上要有一个iframe对象

<!-- lang:html-->
<iframe id=”HtmlEdit” style=”border:1px solid black; height:100%” name=”HtmlEdit”></iframe>

2.得到iframe对象的document IE与其他浏览器不一样，为了兼容，我们要做一个判断

<!-- lang:js-->
if(isIE)
{
iframedoc = window.frames["HtmlEdit"].document;
}
else
{
iframedoc = window.frames["HtmlEdit"].window.document;
}

3.打开document，初始化iframe，这步是为了兼容firefox。

<!-- lang :js-->
iframedoc.open();
iframedoc.write(‘<html><head><mce:style type=”text/css”><style type=”text/css” mce_bogus=”1″>body
{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style></head><body></body></html>’);

4.打开document的编辑模式

<!-- lang:js -->
iframedoc.designMode=’on’;

<h2>第二部分：编辑操作</h2> 做完第一部分后，已经可以在iframe中自由的输入文本了。然后就可以开始编辑。编辑时用的是*execCommand()*方法。

使用方法如下：

<!-- lang:js -->
iframedoc.execCommand(‘bold’, false,”");
iframedoc.execCommand(‘FontName’, false, value);

execCommand还有很多功能，具体的大家网上搜一下一大把，就不相信介绍了。最后，贴下完整的测试代码：

<!-- lang: 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>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>无标题文档</title>
<script type=”text/javascript”>
var isIE = document.all ? true : false;
var iframedoc;
function init()
{
//获取iframe的document
if(isIE)
{
iframedoc = window.frames["HtmlEdit"].document; //.designMode=’on’;
}
else
{
iframedoc = window.frames["HtmlEdit"].window.document; //.designMode=’on’;
}
iframedoc.open();
iframedoc.write(‘<html><head><mce:style type=”text/css”><style type=”text/css” mce_bogus=”1″>body
{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style></head><body></body></html>’);
iframedoc.designMode=’on’;
}
function getdocvalue()
{
var body = iframedoc.body || iframedoc.documentElement;
var content = body.innerHTML;
return content;
}
function setBold()
{
iframedoc.execCommand(‘bold’, false,”");
}
function setitalic()
{
iframedoc.execCommand(‘italic’, false,”");
}
function setfontfamily(value)
{
iframedoc.execCommand(‘FontName’, false, value);
}
function setfontsize(value)
{
iframedoc.execCommand(‘FontSize’, false, value);
}
</script>
</head>
<body onload=”init()”>
<div id=”test” style=”width:300px; height:30px;”>
<iframe id=”HtmlEdit” style=”border:1px solid black; height:100%” name=”HtmlEdit”></iframe>
</div>
<input type=”button” value=”getvalue” onclick=”alert(getdocvalue())”/>
<input type=”button” value=”setbold” onclick=”setBold()”/>
<input type=”button” value=”setitalic” onclick=”setitalic()”/>
选择字体
<select name=”select” onchange=”setfontfamily(this.value)”>
<option value=”simsun”>宋体</option>
<option value=”simhei”>黑体</option>
<option value=”Arial”>Arial</option>
</select>
字体大小
<select name=”select” onchange=”setfontsize(this.value)”>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
<option value=”5″>5</option>
<option value=”6″>6</option>
<option value=”7″>7</option>
</select>
</body>
</html>

转载于:https://my.oschina.net/guanyue/blog/181531