最近在网上碰到一个人问了我一个问题,在可编辑div中插入文字或者图片。因为web在线编辑器我从来只是用,基本不会去研究源代码。后来正好一个在线聊天web项目中也要用到这个功能,我就特地看看了代码。
基本上编辑器或者在线聊天web页面,是不太可能用textarea在做输入框的,因为我们可能要插入图片或者超级链接,因此选择在iframe或者div作为输入框是必须的。
我这里用的是 div.
要使div可编辑 必须 加入 contentEditable="true" 这个属性。
然后就是获取光标位置(或者选择文字位置)进行文字或者html的插入 。
由于火狐等标准浏览器支持getSelection方法,IE9以上也支持,但是万恶的iE6-8不支持,因此要分两部分代码来写。由于这些代码很简单,以下先贴一遍
复制代码代码如下:
function insertHTML(html)
{
var dthis=$("#div3")[0];//要插入内容的某个div,在标准浏览器中 无需这句话
var sel, range;
if (window.getSelection)
{
// IE9 and non-IE
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
var el = document.createElement('div');
el.innerHTML = html;
var frag = document.createDocumentFragment(), node, lastNode;
while ( (node = el.firstChild) )
{
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
}
else if (document.selection && document.selection.type !='Control')
{
$(dthis).focus(); //在非标准浏览器中 要先让你需要插入html的div 获得焦点
ierange= document.selection.createRange();//获取光标位置
ierange.pasteHTML(html); //在光标位置插入html 如果只是插入text 则就是fus.text="..."
$(dthis).focus();
}
}
以上代码基本 完成了 在可编辑div中 插入指定的html内容,这些代码在baidu或者google中到处可以搜到,因此不再解释为什么这么写(太普遍了)
执行后 会发现在IE或者非标准浏览器中 是正常的。在火狐或者chrome中 就不正常了
譬如 以下页面 ,我有 不定数量的div(可能是程序动态生成),我只需要其中某一个div进行html的插入,其他不需要。
复制代码代码如下:
.....其他html元素.....
<div id="div1" contentEditable="true" ></div>
<div id="div2" contentEditable="true" ></div>
<div contentEditable="true" id="div3"></div>
<input type="button" id="cmdInsert" onclick="执行向div3插入html方法"/>
<PRE class=html name="code">.....其他html元素.....</PRE>
<P></P>
<PRE></PRE>
如上页面 我只需要div3 支持插入html 其他两个 只是可编辑而已。
<P></P>
<P>使用上述代码会发现,如果最后一个失去焦点的是 div3 那么一切正常 如果 不是div3 或者 我又点到页面其他控件或者空白处,会发现插入的html没有插入到我们想要的div3中而是插入到了 其他地方。</P>
<P> 这其实不是bug,而是正常现象,getSelection 可以横跨很多域,因此无法保证 获得出来的range一定是你需要的div
</P>
<P> 这里我再次申明,我实在不想看(哪怕看一眼)国内的在线web编辑器是如何实现的。经过我翻查了度娘和google发现有个思路可以解决。</P>
<P>
</P>
<P> 其实我们要解决的就是一件事情,每当页面上的元素(包括div或者任意元素) 获得焦点又失去后,我们只需获得最后一个失去焦点的div是否是div3,如果是则执行上述代码,如果不是直接在div3的内容后面加入要插入的html(硬编码就可以。不要告诉我 不会)</P>
<P> 一开始我想到的办法是对div3设置一个click事件以及focus事件,当鼠标点进去或者获得焦点时 把一个变量 譬如叫做isdiv3 设置为true,点其他地方设置为false(这个方法实际上是行不通的,这里我就不多解释为什么行不通,有各种不同的情形可以导致即使获得焦点,isdiv3依然不会被设置为true,而且需要对每个html元素设置事件让isdiv3变为false,这是很恐怖的事情).</P>
<P>
</P>
<P> 这里我放出一种比较通用和不容易被干扰的解决办法。</P>
<P> 首先在 页面的 最顶部写上</P>
<P> <style></P>
<P> div:focus{z-index:100;} // 这里随意你设置多少值,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++)
{
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="";
}
}
//再加入一个全屏事件
<PRE class=javascript name="code"> $(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
}
})</PRE>
<P></P>
<PRE></PRE>
然后修改一下 insertHTML 这个方法 <PRE class=javascript name="code" sizcache="0" sizset="8"> function insertHTML(html)
{
var dthis=$("#div3")[0];
var sel, range;
if (window.getSelection)
{
if(lastFocusID!="div3")
{
<PRE class=javascript name="code"> $("#div3).html(dthis.innerHTML+html) ;//说明 用户可能在其他控件上 进行焦点或者其他操作 则</PRE> return;//后面不执行了
}
。。。。。。。。。。//其他代码照旧
<PRE></PRE>
这样就解决火狐或者chrome里面 会出现乱插入内容的现象。
<P></P>
<P>
</P>
<P> 当然这只是一个思路, 欢迎大家提供更好的办法和性能更高的思路。
</P>
<P>
</P>
</PRE></PRE>
基本上编辑器或者在线聊天web页面,是不太可能用textarea在做输入框的,因为我们可能要插入图片或者超级链接,因此选择在iframe或者div作为输入框是必须的。
我这里用的是 div.
要使div可编辑 必须 加入 contentEditable="true" 这个属性。
然后就是获取光标位置(或者选择文字位置)进行文字或者html的插入 。
由于火狐等标准浏览器支持getSelection方法,IE9以上也支持,但是万恶的iE6-8不支持,因此要分两部分代码来写。由于这些代码很简单,以下先贴一遍
复制代码代码如下:
function insertHTML(html)
{
var dthis=$("#div3")[0];//要插入内容的某个div,在标准浏览器中 无需这句话
var sel, range;
if (window.getSelection)
{
// IE9 and non-IE
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
var el = document.createElement('div');
el.innerHTML = html;
var frag = document.createDocumentFragment(), node, lastNode;
while ( (node = el.firstChild) )
{
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
}
else if (document.selection && document.selection.type !='Control')
{
$(dthis).focus(); //在非标准浏览器中 要先让你需要插入html的div 获得焦点
ierange= document.selection.createRange();//获取光标位置
ierange.pasteHTML(html); //在光标位置插入html 如果只是插入text 则就是fus.text="..."
$(dthis).focus();
}
}
以上代码基本 完成了 在可编辑div中 插入指定的html内容,这些代码在baidu或者google中到处可以搜到,因此不再解释为什么这么写(太普遍了)
执行后 会发现在IE或者非标准浏览器中 是正常的。在火狐或者chrome中 就不正常了
譬如 以下页面 ,我有 不定数量的div(可能是程序动态生成),我只需要其中某一个div进行html的插入,其他不需要。
复制代码代码如下:
.....其他html元素.....
<div id="div1" contentEditable="true" ></div>
<div id="div2" contentEditable="true" ></div>
<div contentEditable="true" id="div3"></div>
<input type="button" id="cmdInsert" onclick="执行向div3插入html方法"/>
<PRE class=html name="code">.....其他html元素.....</PRE>
<P></P>
<PRE></PRE>
如上页面 我只需要div3 支持插入html 其他两个 只是可编辑而已。
<P></P>
<P>使用上述代码会发现,如果最后一个失去焦点的是 div3 那么一切正常 如果 不是div3 或者 我又点到页面其他控件或者空白处,会发现插入的html没有插入到我们想要的div3中而是插入到了 其他地方。</P>
<P> 这其实不是bug,而是正常现象,getSelection 可以横跨很多域,因此无法保证 获得出来的range一定是你需要的div
</P>
<P> 这里我再次申明,我实在不想看(哪怕看一眼)国内的在线web编辑器是如何实现的。经过我翻查了度娘和google发现有个思路可以解决。</P>
<P>
</P>
<P> 其实我们要解决的就是一件事情,每当页面上的元素(包括div或者任意元素) 获得焦点又失去后,我们只需获得最后一个失去焦点的div是否是div3,如果是则执行上述代码,如果不是直接在div3的内容后面加入要插入的html(硬编码就可以。不要告诉我 不会)</P>
<P> 一开始我想到的办法是对div3设置一个click事件以及focus事件,当鼠标点进去或者获得焦点时 把一个变量 譬如叫做isdiv3 设置为true,点其他地方设置为false(这个方法实际上是行不通的,这里我就不多解释为什么行不通,有各种不同的情形可以导致即使获得焦点,isdiv3依然不会被设置为true,而且需要对每个html元素设置事件让isdiv3变为false,这是很恐怖的事情).</P>
<P>
</P>
<P> 这里我放出一种比较通用和不容易被干扰的解决办法。</P>
<P> 首先在 页面的 最顶部写上</P>
<P> <style></P>
<P> div:focus{z-index:100;} // 这里随意你设置多少值,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++)
{
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="";
}
}
//再加入一个全屏事件
<PRE class=javascript name="code"> $(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
}
})</PRE>
<P></P>
<PRE></PRE>
然后修改一下 insertHTML 这个方法 <PRE class=javascript name="code" sizcache="0" sizset="8"> function insertHTML(html)
{
var dthis=$("#div3")[0];
var sel, range;
if (window.getSelection)
{
if(lastFocusID!="div3")
{
<PRE class=javascript name="code"> $("#div3).html(dthis.innerHTML+html) ;//说明 用户可能在其他控件上 进行焦点或者其他操作 则</PRE> return;//后面不执行了
}
。。。。。。。。。。//其他代码照旧
<PRE></PRE>
这样就解决火狐或者chrome里面 会出现乱插入内容的现象。
<P></P>
<P>
</P>
<P> 当然这只是一个思路, 欢迎大家提供更好的办法和性能更高的思路。
</P>
<P>
</P>
</PRE></PRE>
标签:
可编辑div,插入文字,图片
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“在可编辑div中插入文字或图片解决思路与实现步骤”评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新动态
20240901
20240901
- 《庄心妍 实力唱将 发烧音乐精选集》[WAV+CUE][380MB]
- [音展纪念碟]2006年《TAA台湾第十六届国际HI-ENDHI-FI音响展》2cd[WAV]
- 中国音乐地图之听见西藏山歌牧歌酒歌2020[WAV分轨]
- 王宏伟2017-永远的红飘带[太平洋影音][WAV+CUE]
- 费翔.1997-NOW现在【第一中国】【WAV+CUE】
- 新格合唱团.1981-我唱你和2辑(滚石新格民歌系列)【新格】【WAV+CUE】
- 陈柏宇.2011-QUINQUENNIUM【SONY】【WAV+CUE】
- 雨果唱片-《金唛系列-蔷薇依韵琼瑶》WAV
- 陈百强《凝望(2012华纳LPCD45限量版)[DMI]》[WAV整轨]
- 模拟之声慢刻CD《徐小凤45周年》[德国母带][低速原抓WAV+CUE]
- 《庄心妍 实力唱将 发烧音乐精选集》[WAV+CUE][380MB]
- 《王菲 单曲合集》[FlAC/分轨][520MB]
- 《费玉清 原味再现 水长流》[WAV+CUE][430MB]
- 群星.1992-畅销榜老歌金曲10CD【风格】【WAV+CUE】
- 孙悦.2024-时光音乐会【金蜂】【WAV+CUE】