正在编写UBB编辑器, 在字体设置功能,使用execCommand函数得不到效果.
代码如下
test.html
<html>
<head>
<title></title>
<style type="text/css">
<!--
#fontface {
color: #000;
border: 1px solid #fff;
padding: 1px;
position: absolute;
left: 99px;
top: 99px;
z-index: 99;
width: 110px;
height: 20px;
display: none;
background: #ccc;
text-align:left;
}
#fontface ul {
list-style: none;
margin: 0;
line-height: 16px;
}
#fontface ul li {
display: block;
line-height: 16px;
cursor: hand;
padding: 2px;
height: 16px;
}
-->
</style>
<script type="text/javascript">
<!--
function ubbOver(obj)
{
obj.style.borderTop = "1px solid #fff";
obj.style.borderLeft = "1px solid #fff";
obj.style.borderRight = "1px solid #aaa";
obj.style.borderBottom = "1px solid #aaa";
}
function ubbOut(obj)
{
obj.style.border = "none";
}
function ubbDown(obj)
{
obj.style.borderTop = "1px solid #aaa";
obj.style.borderLeft = "1px solid #aaa";
obj.style.borderRight = "1px solid #fff";
obj.style.borderBottom = "1px solid #fff";
}
function ubbUp(obj)
{
obj.style.borderTop = "1px solid #fff";
obj.style.borderLeft = "1px solid #fff";
obj.style.borderRight = "1px solid #aaa";
obj.style.borderBottom = "1px solid #aaa";
}
function ubbClick(type, obj)
{
var element = document.getElementById(type);
var rect = obj.getBoundingClientRect();
element.style.left = rect.left;
element.style.top = rect.bottom;
element.style.display = "block";
}
-->
</script>
</head>
<body>
<div id="fontface">
<ul>
<li style="font: 12px '宋体';" onMouseOver="this.style.background = '#666'" onMouseOut="this.style.background = ''" onClick="addReply.document.execCommand('FontName',false,'楷体_GB2312'); this.parentNode.parentNode.style.display='none';">楷体</li>
</ul>
</div>
<div style="background:url(UBB/bg.gif); text-align: left;">
<table>
<tr>
<td class="ico"><img src="UBB/1.gif" alt="字体" width="25" height="20" onClick="ubbClick('fontface', this)" onMouseDown="ubbDown(this)" onMouseUp="ubbUp(this)" onMouseOver="ubbOver(this)" onMouseOut="ubbOut(this)" />
</td>
</tr>
</table>
</div>
<div style="width:100%; height:230px">
<form action="" method="post" id="replyForm" name="replyForm">
<input type="hidden" name="content" value="" />
<iframe id="addReply" ></iframe>
<script type="text/javascript">
<!--
addReply.document.designMode = 'On';
-->
</script>
</form>
</div>
</body>
</html>
鄙人初上手,请各位前辈指点一二.