div 可编辑--获取光标位置插入元素

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Language" content="zh-cn" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DIV可编辑框鼠标光标处插入图片或者文字。</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    </script>
    <style type="text/css">
        .editbox {
            width: 400px;
            height: 200px;
            border: 1px solid #000;
            overflow-x: hidden;
            overflow-y: auto;
            outline: none;
        }
    </style>
</head>
<!-- onmousedown="return false" -->

 

<body>
    <div id="testdiv" contenteditable="true" class="editbox">可以在任意文字后面插入图片或者文字哦！<br /></div>
    <select type="text" id="ipt">
        <option value="haha"></option>
        <option value="hhh"></option>
    </select>
    <input type="button" value="点击插入" id='clc'>



    <script type="text/javascript">
        $(function () {
            $("#clc").click(function () {
                $("#testdiv").focus();
                // var sy = $(".imgbox img").index(this) + 1;
                var val = document.getElementById('ipt').value;
                var img_url = "<span class='cs' contenteditable='false'>" + val + "</span>";

 

                /*此处如果不是插入图片可这样：
                var img_url = "插入测试的文字";
                */
                _insertimg(img_url);

 

            })
            //注：如果要插入的是那种“快捷发言，快捷留言”里的文字，只需把那些文字都分别放在A标签里即可，然后img_url=a标签里面的内容。工作中的编辑器终于搞定！能插入图片和快捷发言和表情图片等。
        })





        //锁定编辑器中鼠标光标位置。。
        function _insertimg(str) {

 

            var selection = window.getSelection ? window.getSelection() : document.selection;
            var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
            if (!window.getSelection) {
                document.getElementById('testdiv').focus();
                var selection = window.getSelection ? window.getSelection() : document.selection;
                var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
                range.pasteHTML(str);
                range.collapse(false);
                range.select();
                $('.cs').click(function (e) {
                    console.log(e);
                    $(this).remove();
                })
            } else {
                document.getElementById('testdiv').focus();
                range.collapse(false);
                var hasR = range.createContextualFragment(str);
                var hasR_lastChild = hasR.lastChild;
                while (hasR_lastChild && hasR_lastChild.nodeName.toLowerCase() == "br" && hasR_lastChild
                    .previousSibling && hasR_lastChild.previousSibling.nodeName.toLowerCase() == "br") {
                    var e = hasR_lastChild;
                    hasR_lastChild = hasR_lastChild.previousSibling;
                    hasR.removeChild(e)
                } 
                range.insertNode(hasR);
                if (hasR_lastChild) {
                    range.setEndAfter(hasR_lastChild);
                    range.setStartAfter(hasR_lastChild)
                }
                selection.removeAllRanges();
                selection.addRange(range)
                $('.cs').dblclick(function (e) {
                    console.log(e,new Date());
                    $(this).remove();
                })
            }
        }
    </script>
</body>

 

</html>
posted @ 2021-05-30 22:18  W南柯一梦  阅读(926)  评论(1)    收藏  举报