应用场景其实就像百度贴吧中的回复框,除了文字就是表情图片。插入图片时候,需要在闪烁的光标(插入符)后边插入,插入后光标得在图片之后。常见的富文本编辑器就是这样的,但对于没接触过这一块的人来说,这么个需求实在难以下手。
经一番搜索了解,知道要完成这个功能得用到selection“选区”对象以及range“范围”对象。这些API一般开发中用得少,不太了解也是正常的(也许只是我自己菜,那就当没说好了^.^)。selection对象由window.getSelection()方法获得,它代表页面中的文本选区。选区对应的区域,就是range对象,可由selection对象的getRangeAt()方法获得。实现在光标处插入图片后将光标移到图片后边,就是使用这两个对象中的方法。
经花大时间大精力“试”出来后发现,特么也太简单了,但在一切无知的时候,真的很难。步骤如下:获得selection选区对象后,再获得范围对象range,创建图片节点,将图片节点插入到范围中,接着将范围收缩为它末端的一个点,最后将选区清除,将收缩后的范围重新添加到选区中即可。对于IE来说,selection对象只有在IE 9或以上版本中才存在,IE有自己的一套写法,更简单!
function insertImg(src) { if ('getSelection' in window) { var sel = window.getSelection(); if (sel && sel.rangeCount === 1 && sel.isCollapsed) { //有选区,且选区数量是一个,且选区的起始点和终点在同一位置 var range = sel.getRangeAt(0); var img = new Image(); img.src=src; range.insertNode(img); range.collapse(false);//对于IE来说,参数不可省略 sel.removeAllRanges(); sel.addRange(range); } } else if ('selection' in document) { var div = document.getElementById('content'); div.focus(); var range = document.selection.createRange(); range.pasteHTML('<img src="' + src + '">');//插入文本,则range.text="xxx"即可 div.focus();//IE 11模拟的IE5~IE8无须这一步也能获得焦点 } }
DEMO如下:
3 comments
Pingback: 輸入框插入表情的實現 | 程式前沿
Pingback: 输入框插进去脸色的完成 - 算法网
Pingback: 输入框插入表情的实现 - 算法网