在可编辑div中插入文字或图片解决思路与实现步骤

<PRE class=html name=”code”>…..其他html元素…..</PRE>

<P></P>
<PRE></PRE>

&nbsp;如上页面 我只需要div3 支持插入html 其他两个 只是可编辑而已。

<P></P>
<P>使用上述代码会发现，如果最后一个失去焦点的是 div3 那么一切正常 如果 不是div3 或者 我又点到页面其他控件或者空白处，会发现插入的html没有插入到我们想要的div3中而是插入到了 其他地方。</P>
<P>&nbsp;&nbsp; 这其实不是bug,而是正常现象，getSelection 可以横跨很多域，因此无法保证 获得出来的range一定是你需要的div

</P>
<P>&nbsp;这里我再次申明，我实在不想看(哪怕看一眼)国内的在线web编辑器是如何实现的。经过我翻查了度娘和google发现有个思路可以解决。</P>
<P>

</P>
<P>&nbsp; 其实我们要解决的就是一件事情，每当页面上的元素(包括div或者任意元素) 获得焦点又失去后，我们只需获得最后一个失去焦点的div是否是div3,如果是则执行上述代码，如果不是直接在div3的内容后面加入要插入的html（硬编码就可以。不要告诉我 不会）</P>
<P>&nbsp;&nbsp;&nbsp;&nbsp; 一开始我想到的办法是对div3设置一个click事件以及focus事件，当鼠标点进去或者获得焦点时 把一个变量 譬如叫做isdiv3 设置为true,点其他地方设置为false（这个方法实际上是行不通的，这里我就不多解释为什么行不通，有各种不同的情形可以导致即使获得焦点，isdiv3依然不会被设置为true,而且需要对每个html元素设置事件让isdiv3变为false,这是很恐怖的事情）.</P>
<P>

</P>
<P>&nbsp; 这里我放出一种比较通用和不容易被干扰的解决办法。</P>
<P>&nbsp;首先在 页面的 最顶部写上</P>
<P>&nbsp;<style></P>
<P>&nbsp;div:focus{z-index:100;}&nbsp; // 这里随意你设置多少值，100只是举个列子

</P>
<P></style></P>
<P>上面这个样式告诉我们，当只有div 获得焦点后 他会产生一个css属性就是 z-index被设置成了100，以任何形式失去焦点 这个css属性就没了。当然你也可以设置其他的css属性。因为我们在点button执行函数的时候，div3也会失去焦点（getSelection 依然存在）</P>
<P>

</P>
<P>以下思路就清晰了 我们再写一个函数</P>
<P><PRE class=javascript name=”code” sizcache=”0″ sizset=”5″>var lastFocusID=””;
function getFocus()
{
var divlist = document.getElementsByTagName(‘div’);
for(var i=0; i<divlist.length; i++)