Js关于光标对象与定位插入图片

欢迎进入明日又天涯的技术日记 —star.Hou的红楼一梦

在编辑器里插入文字、图片表情等需要用到Js定位光标节点。
常见思路是把光标两边数据切开，把图片或者字符加在中间，然后把三个字符串重新拼接起来，这样要算长度、切割字符串、重新拼接起来。很麻烦。

//点击图片
$(".biaoqing").click(function ()
    {
        // 定义最后光标对象
        var lastEditRange;
        //获取点击图片地址
        var imgurl = $(this).attr('src');
        var edit1 = $('.nicEdit-main')
        // 编辑框设置焦点
        edit1.focus()
        // 获取选定对象
        var selection = getSelection()
        // 判断是否有最后光标对象存在
        if (lastEditRange) {
            // 存在最后光标对象，选定对象清除所有光标并添加最后光标还原之前的状态
            selection.removeAllRanges()
            selection.addRange(lastEditRange)
        }
        //定义图片节点--》插入到光标所在位置-----》完成！下面4行是关键。直接在光标位置处插入节点。
        var range = selection.getRangeAt(0)
        var img = document.createElement('img')
        img.src = imgurl;
        range.insertNode(img)
    });