<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>divDesign</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script type="text/javascript">
var isIE = document.all;
var ifr = null;
function $(objId,isIframe)
{
if(isIframe)
{
var obj = isIE?window.frames["edit"]:document.getElementById("edit").contentWindow;
return obj;
}
else
{
return document.getElementById(objId);
}
}function init()
{
ifr = $("edit",true);
ifr.document.designMode = "on";
if(document.all)
{
for(var i=0;i<document.all.length;i++)
{
document.all.item(i).unselectable = "on";
}
}
}function set(str)
{
if(document.selection)
{
var selectText = ifr.document.selection.createRange();
//var selectText = document.selection.createRange();
if(selectText.text) selectText.execCommand(str);
else alert("no select");
//document.selection = '';
}
else
{
ifr.document.execCommand(str,false,"");

}}function setNeedMore(style,value)
{
if(document.selection)
{
var selectText = ifr.document.selection.createRange();
if(selectText.text) selectText.execCommand(style,false,value);
else alert("no select");
}
else
{
//var selectText = ifr.document.getSelection();
ifr.document.execCommand(style,false,value);
}
}
function setColor(str)
{
if(document.selection)
{
var selectText = ifr.document.selection.createRange();
if(selectText.text)
{
selectText.execCommand("forecolor",false,str);
}
else alert("no select");
}
else
{
//var selectText = ifr.document.getSelection();
ifr.document.execCommand("forecolor",false,str);
}

}function showHtml()
{
alert(ifr.document.body.innerHTML);
}function changeFont(fontName)
{
if(document.selection)
{
var selectText = ifr.document.selection.createRange();
if(selectText.text) selectText.execCommand("FontName",false,fontName);
else alert("no select");
//document.selection = '';
}
else
{
ifr.document.execCommand("FontName",false,fontName);
}
}function changeFontSize(fontSize)
{
if(document.selection)
{
var selectText = ifr.document.selection.createRange();
if(selectText.text) selectText.execCommand("FontSize",false,fontSize);
else alert("no select");
}
else
{
ifr.document.execCommand("FontSize",false,fontSize);
}
}</script><style type="text/css">
.frameEdit
{
margin-left:0;
margin-top:0;
width:300px;
height:100px;
overflow:auto;
margin:4px;
}.defaultColor
{
position:absolute;
width:100%;
height:30px;
top:30px;
left:0;
border-bottom:"black solid 1px"
}.eachColor
{
position:relative;
width:20px;
height:20px;
border:"black solid 1px";
margin:"2px,2px,2px,2px";
float:"left";
}.eachColor2
{
position:relative;
width:20px;
height:20px;
border:"black solid 1px";
margin:"2px,2px,2px,2px";
float:"left";
top:60px;
left:0;
}.droplist { 
border: 1px solid #408bb6; 
width: 155px; 
color: #4f6b72; 
font: bold 12px verdana,sans-serif; 
padding: 3px;
background-image: url(/img/drop.gif);}</style>
</HEAD>
 <BODY onload="init()">
<input type="button" value="bold" name="setBold" onclick="set('bold')"/>
<input type="button" value="italic" name="setItalic" onclick="set('italic')"/>
<input type="button" value="html" name="containHtml" onclick="showHtml()"/>
<select name="changeFont" id="changeFont" class="droplist" onchange="setNeedMore('FontName',this.value)">
          <option value="Courier">Courier</option>
          <option value="Times New Roman" selected>select font</option>
          <option value="Helvetica">Helvetica</option>
          <option value="Arial">Arial</option>
          <option value="Georgia">Georgia</option>
          <option value="Courier New">Courier New</option>
          <option value="Geneva">Geneva</option>
</select> <select name="select" id="setSize" class="droplist" onChange="changeFontSize(this.value)">
      <option value=0>0</option>
      <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 selected>7</option>
      <option value=8>8</option>
      <option value=9>9</option>
      <option value=10>10</option>
      <option value=11>11</option>
      <option value=12>12</option>
      <option value=13>13</option>
      <option value=14>14</option>
      <option value=15>15</option>
      <option value=16>16</option>
      <option value=17>17</option>
    </select> <br>
<iframe id="edit" name="edit" class="frameEdit" isMultiLine="false" isContentEditable="true" frameBorder="yes" scrolling="NO"></iframe>
</BODY>
</HTML>
这个iframe是可以编辑的,在里面输入文字后,点击bold、italic加粗、变斜体,这些没有问题,问题是选择字体的时候,如果我iframe里的文字是abcdef,我先选中了abc再选字体为arial,abc的字体可以正常的变化,而这个时候我再选中ef,再选择字体为arial,就不会变化了,因为下拉框触发的是onchange事件。再选择arial,下拉框的状态实际上并没有变化,所以我应该要在选择ef的时候,把下拉框里选中的状态变成ef的字体,这样再改变的时候就没有问题了,但是要怎么得到选择文本的字体信息呢?比如它的字体,颜色,大小,是否粗的,斜的....先谢谢大家~~~