在div文本區域，光標位置處插入

時間 2020-01-22

標籤 div 文本區域光標位置插入欄目 CSS 简体版

原文原文鏈接

需求背景：利用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，不存在任何被選中的內容。