在可编辑div中如何在光标处插入图片

Posted on by

今天贝贝同学问了我一个问题，怎样在可编辑的div中的光标处插入图片。网上search了一把，果然如贝贝所说，一堆都是往光标处插入文本的。
最后发现使用document.execCommand()方法即可简单的往光标处插入图片。在chrome和firefox下只需要执行document.execCommand(‘InsertImage’, false, _imgUrl);就能达到目的，可是在IE下就有bug：当光标停留在某个地方，不选中任何东西的情况下，该方法无效。当选中编辑区内的一部分内容时，该方法有效。经过一番摸索，终于找到解决方案。原来在不选中任何东西的情况下，当我去点击插入按钮时，编辑区就失去了焦点，这个时候插入会失败。所以需要先保存焦点状态，插入之前恢复状态即可。具体内容看代码

<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>edit</title>
</head>
<body>
    <div id="editor" 
        style="width:400px;margin:100px auto;height:300px;border:1px solid #DFDFDF;" 
        contenteditable="true">
        这里插入一个图片！
    </div>
    <a href="javascript:void(0);" onclick="edit()">强力插入！</a>
    <script>
    var editor = document.getElementById("editor");
    var range, bookmark;
    var saveFocus = function(){//保存焦点状态
        if (document.selection) { //只有坑爹的IE才执行下面的代码
            range = document.selection.createRange();
            bookmark=range.getBookmark();
        }
    }
    editor.onclick = saveFocus;//在鼠标点击编辑区时保存焦点
    editor.onkeydown = saveFocus;//在输入内容时也保存焦点
    function edit() {
        insertImg("http://www.baidu.com/img/baidu_sylogo1.gif");
    }
    function insertImg(_img) {
        if (range) { //同样，坑爹IE专用代码
            range.moveToBookmark(bookmark);
            range.select();
        }
        document.execCommand('InsertImage', false, _img);

    }
    </script>
</body>
</html>

将代码中方法document.execCommand(‘InsertImage’, false, _img)更改参数，应该可以插入html代码等其他元素。