在可编辑div中插入文字或图片解决思路与实现步骤
70 浏览量
2020-12-13
17:45:42
上传
评论
收藏 71KB PDF 举报
在可编辑在可编辑div中插入文字或图片解决思路与实现步骤中插入文字或图片解决思路与实现步骤
最近在网上碰到一个人问了我一个问题，在可编辑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>
评论0
最新资源