仅在特定 div 中替换选定的 HTML

Question

我想选择用户在 contenteditable div 中选择的任何内容的 HTML。我找到了一些代码来检索所选内容的 HTML，但它不仅限于 div。

我想要做的是复制选定的 HTML，将标签包裹在它周围，然后用它替换选择。因此，例如，'test' 会变成 'test'。

<div contenteditable="true" class="body" id="bodydiv"></div>

function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
}

Answer 1

您好，用于在选定的 div 中获取内容（文本）我创建了一个小代码，您可以查看它是否适合您：

$(document).ready(function(){
         $(document).bind('mouseup', function(){
         var content =  getSelected();
            content = "<b>"+content+"</b>";
            $('#selected').html(content);
        });
});

    function getSelected(){
        var t;
        if(window.getSelection){
           t = window.getSelection();
           var start = t.focusOffset;
           var end = t.baseOffset;
           t = t.anchorNode.data;
           t = t.slice(start, end);
        }  else if (document.selection) {
             t = document.selection.createRange().text;
        }
        return t;
    }

还有

<div id="selected"></div>

希望这会有所帮助。