首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

在可编辑div中插入文字或图片的有关问题解决思路

2012-12-23 
在可编辑div中插入文字或图片的问题解决思路 最近在网上碰到一个人问了我一个问题,在可编辑div中插入文字

在可编辑div中插入文字或图片的问题解决思路

 最近在网上碰到一个人问了我一个问题,在可编辑div中插入文字或者图片。因为web在线编辑器我从来只是用,基本不会去研究源代码。后来正好一个在线聊天web项目中也要用到这个功能,我就特地看看了代码。

   基本上编辑器或者在线聊天web页面,是不太可能用textarea在做输入框的,因为我们可能要插入图片或者超级链接,因此选择在iframe或者div作为输入框是必须的。

   我这里用的是 div.

  要使div可编辑 必须 加入 contentEditable="true" 这个属性。

  然后就是获取光标位置(或者选择文字位置)进行文字或者html的插入 。

 由于火狐等标准浏览器支持getSelection方法,IE9以上也支持,但是万恶的iE6-8不支持,因此要分两部分代码来写。由于这些代码很简单,以下先贴一遍

                $("#div3).html(dthis.innerHTML+html)     ;//说明 用户可能在其他控件上 进行焦点或者其他操作 则
return;//后面不执行了
}

。。。。。。。。。。//其他代码照旧

    这样就解决火狐或者chrome里面 会出现乱插入内容的现象。


   当然这只是一个思路, 欢迎大家提供更好的办法和性能更高的思路。


热点排行