在线编辑器设计问题：设置字体颜色时，破坏编辑框当前的选定内容，怎么处理？

就像http://www.microsoft.com/china/msdn/Archives/workshop/createwp.asp提到的“使用了 contentEditable 属性、unselectable 属性和三个可执行的命令来创建一个可在 Web 页上使用的简单的小文本编辑器。很重要的一点是，div 语句在另一个div 语句中，而外层 div 底部有三个按钮。按钮使用 document.execCommand 方法来格式化当前选定内容的样式。内部 div 具有 contentEditable 属性，而外部 div 和按钮是不可选定的。由于它们是不可选定的，所以用户可以单击它们而不会破坏当前的选定内容。这对按钮尤其有用，因为用户可以选定 contentEditable 区域中的一些文本，然后单击粗体按钮、斜体按钮和下划线按钮，而不必重新选定文本：”
但是在设置字体颜色时，需要一个iframe来显示颜色，在这个iframe里点击鼠标，就会破坏掉编辑框内当前的选定内容（我已经在代码里加了unselectable="on"的属性）。还要怎么处理呢？
<span id="1_ForeColor_exp"  class="button" onmousemove="this.className='buttonOver';" onmouseout="this.className='button';" onclick="Show_ForeColor();"><img src="images/editor/forecolor.gif" title="颜色" id="1_ForeColor" width="20" height="20" />
 <span id="ForeColor1" class="dropdown" style="width:200px; overflow:hidden; display:none;" unselectable="on">
  <iframe name="ForeColor_win" unselectable="on" src="images/editor/select_color.htm?color=000000" width="100%" height="140px" frameborder="0" scrolling="no"  ></iframe>
 </span> 
</span>