Home » Code » 在可编辑的div中插入图片

在可编辑的div中插入图片

应用场景其实就像百度贴吧中的回复框,除了文字就是表情图片。插入图片时候,需要在闪烁的光标(插入符)后边插入,插入后光标得在图片之后。常见的富文本编辑器就是这样的,但对于没接触过这一块的人来说,这么个需求实在难以下手。

经一番搜索了解,知道要完成这个功能得用到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如下:

参考链接:http://blog.csdn.net/shenyisyn/article/details/8277904

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Time limit is exhausted. Please reload CAPTCHA.