Bootstrap

在div文本区域,光标位置处插入

  • 需求背景:利用div的contentEditable="true",可编辑区域,插入一些标签包含文本,非纯文本格式, vue 项目中我是使用v-html渲染,v-model无法达到我们的需求
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>可编辑的DIV(兼容IE8)</title>
    <style type="text/css">
    #content {
        width: 500px;
        height: 200px;
        border: 1px solid #CCC;
    }
    </style>
</head>

<body>
    <button id="insert" unselectable="on" onmousedown="return false">笑脸</button>
    <div id="content" contenteditable="true"></div>
    <script type="text/javascript">
        // 在光标位置插入html代码,如果dom没有获取到焦点则追加到最后
        window.onload= function(){
            function insertAtCursor(jsDom, html) {
            if (jsDom != document.activeElement) { // 如果dom没有获取到焦点,追加
                jsDom.innerHTML = jsDom.innerHTML + html;
                return;
            }
            var sel, range;
            if (window.getSelection) {
                // IE9 或 非IE浏览器
                debugger
                sel = window.getSelection();
                if (sel.getRangeAt && sel.rangeCount) {
                    range = sel.getRangeAt(0);
                    range.deleteContents();
                    // Range.createContextualFragment() would be useful here but is
                    // non-standard and not supported in all browsers (IE9, for one)
                    var el = document.createElement("div");
                    el.innerHTML = html;
                    var frag = document.createDocumentFragment(),
                        node, lastNode;
                    while ((node = el.firstChild)) {
                        lastNode = frag.appendChild(node);
                    }
                    range.insertNode(frag);
                    // Preserve the selection
                    if (lastNode) {
                        range = range.cloneRange();
                        range.setStartAfter(lastNode);
                        range.collapse(true);
                        sel.removeAllRanges();
                        sel.addRange(range);
                    }
                }
            } else if (document.selection && document.selection.type != "Control") {
                // IE < 9
                document.selection.createRange().pasteHTML(html);
            }
        }

        //  点击插入
        document.getElementById('insert').onclick = function() {
            var html = ':)';
            insertAtCursor(document.getElementById('content'), html);
        };
    }

    </script>
</body>

</html>
demo效果

js api
  • document.activeElement 该属性属于HTML5中的一部分,它返回当前获得焦点的元素,如果不存在则返回“body”。
  • selection对象 selection是对当前激活选中区(即高亮文本)进行操作。 在非IE浏览器(Firefox、Safari、Chrome、Opera)下可以使用window.getSelection()获得selection对象,本文讲述的是标准的selection操作方法。文中绝大部分内容来自 https://developer.mozilla.org/en/DOM/Selection
方法
  • getRangeAt(index) 从当前selection对象中获得一个range对象。
  • addRange(range) 将range添加到selection当中,所以一个selection中可以有多个range。 注意Chrome不允许同时存在多个range,它的处理方式和Firefox有些不同。
  • removeRange(range) 从当前selection移除range对象,返回值undefined。 Chrome目前没有改函数,即便是在Firefox中如果用自己创建(document.createRange())的range作为参数也会报错。 如果用oSelction.getRangeAt()取到的,则不会报错。
  • removeAllRanges() 移除selection中所有的range对象,执行后anchorNode、focusNode被设置为null,不存在任何被选中的内容。

转载于:https://my.oschina.net/shuaihong/blog/1935776

;