本篇文章主要介绍了"div+css布局 在可编辑div中插入文字或图片解决思路与实现步骤"，主要涉及到div+css布局方面的内容，对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下：
最近在网上碰到一个人问了我一个问题，在可编辑div中插入文字或者图片。因为web在线编辑器我从来只是用，基本不会去研究源代码。后来正好一个在线聊天web项目中也...
.....其他html元素.....
.....其他html元素.....
如上页面 我只需要div3 支持插入html 其他两个 只是可编辑而已。
使用上述代码会发现，如果最后一个失去焦点的是 div3 那么一切正常 如果 不是div3 或者 我又点到页面其他控件或者空白处，会发现插入的html没有插入到我们想要的div3中而是插入到了 其他地方。
这其实不是bug,而是正常现象，getSelection 可以横跨很多域，因此无法保证 获得出来的range一定是你需要的div
这里我再次申明，我实在不想看(哪怕看一眼)国内的在线web编辑器是如何实现的。经过我翻查了度娘和google发现有个思路可以解决。
其实我们要解决的就是一件事情，每当页面上的元素(包括div或者任意元素) 获得焦点又失去后，我们只需获得最后一个失去焦点的div是否是div3,如果是则执行上述代码，如果不是直接在div3的内容后面加入要插入的html（硬编码就可以。不要告诉我 不会）
一开始我想到的办法是对div3设置一个click事件以及focus事件，当鼠标点进去或者获得焦点时 把一个变量 譬如叫做isdiv3 设置为true,点其他地方设置为false（这个方法实际上是行不通的，这里我就不多解释为什么行不通，有各种不同的情形可以导致即使获得焦点，isdiv3依然不会被设置为true,而且需要对每个html元素设置事件让isdiv3变为false,这是很恐怖的事情）.
这里我放出一种比较通用和不容易被干扰的解决办法。
首先在 页面的 最顶部写上
上面这个样式告诉我们，当只有div 获得焦点后 他会产生一个css属性就是 z-index被设置成了100，以任何形式失去焦点 这个css属性就没了。当然你也可以设置其他的css属性。因为我们在点button执行函数的时候，div3也会失去焦点（getSelection 依然存在）
以下思路就清晰了 我们再写一个函数
var lastFocusID="";
function getFocus()
{
var divlist = document.getElementsByTagName('div');
for(var i=0; i
{
var ta = divlist.item(i);
if (window.getComputedStyle(ta, null).zIndex!=null && window.getComputedStyle(ta, null).zIndex == 100) {
if(ta.id && ta.id!=null)
lastFocusID=ta.id.toString();
else
lastFocusID="";
break;
}
else
lastFocusID="";
}
}
//再加入一个全屏事件
$(window).click(function(e)
{
if (window.getSelection)
{
var getevent=e.srcElement?e.srcElement:e.target;//不要告诉我不知道这句的意思
if(getevent.tagName=="INPUT" && getevent.id!=null && getevent.id=="cmdInsert")
{
//代表 点了插入html的按钮
//则不执行getFocus方法
}
else
getFocus();//除非点了那个插入html的按钮 其他时候必须要执行getFocus来更新最后失去焦点的div
}
})
然后修改一下 insertHTML 这个方法 function insertHTML(html)
{
var dthis=$("#div3")[0];
var sel, range;
if (window.getSelection)
{
if(lastFocusID!="div3")
{
$("#div3).html(dthis.innerHTML+html) ;//说明 用户可能在其他控件上 进行焦点或者其他操作 则 return;//后面不执行了
}
。。。。。。。。。。//其他代码照旧
这样就解决火狐或者chrome里面 会出现乱插入内容的现象。
当然这只是一个思路， 欢迎大家提供更好的办法和性能更高的思路。
以上就介绍了div+css布局 在可编辑div中插入文字或图片解决思路与实现步骤，包括了div+css布局方面的内容，希望对CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播有兴趣的朋友有所帮助。
本文网址链接：http://www.codes51.com/article/detail_1801638_2.html
