如何在contentEditable-DIV中获取HTML代码

How can I get HTML-Code in a contentEditable-DIV

本文关键字：获取 HTML 代码 contentEditable-DIV      更新时间：2023-09-26

在contentEditablediv中，我试图将HTML代码从strat Position 0获取到用户单击的结束位置。

<div id="MyEditableId" contentEditable="true">
  1. Some text 123. <span style="background-color: #0CF;">text 123</span> 456 <span style="background-color: #9F3;">2-> abc </span>
    <br />
    <p> E.g. here is clicked: "click" Text after click </p>
    <p></p>
    <br />
    end of text.
</div>

如下代码片段所示，它将文本从0传递到单击节点的末尾。但我也需要contentEditable-DIV中的HTML代码。

$('#MyEditableId').on('mouseup', function(event) {
    var MyEditable = document.getElementById('MyEditableId');
    MyEditable.focus();
    range = document.createRange();
    // endOffset: It will be better the length of where actually was clicked, e.g. after 15-characters. But this.length will be also ok.
    endOffset = $(this).length;
    range.setStart(MyEditable.firstChild,0);
    range.setEnd(event.target,endOffset);
    var selection = window.getSelection();
    selection.addRange(range);
    // Below I get the selected text from 0 to end of clicked node. But I need the selected HTML-Code from 0 to end of clicked position.
    alert( window.getSelection() );
});

我期望结果如下：

 1. Some text 123. <span style="background-color: #0CF;">text 123</span> 456 <span style="background-color: #9F3;">2-> abc </span>
    <br />
    <p> E.g. here is clicked: "click"

如何获取内容中的HTML代码而不是文本Editable DIV？提前感谢。

您可以选择div并使用其属性innerHTML

http://jsfiddle.net/at917rss/

<div id="MyEditableId" contentEditable="true">
  1. Some text 123. <span style="background-color: #0CF;">text 123</span> 456 <span style="background-color: #9F3;">2-> abc </span>
    <br />
    <p> E.g. here is clicked: "click" Text after click </p>
    <p></p>
    <br />
    end of text.
</div>
    $('#MyEditableId').on('mouseup', function(event) {
        var MyEditable = document.getElementById('MyEditableId');
        MyEditable.focus();
        range = document.createRange();
        // endOffset: It will be better the length of where actually was clicked, e.g. after 15-characters. But this.length will be also ok.
        endOffset = $(this).length;
        range.setStart(MyEditable.firstChild,0);
        range.setEnd(event.target,endOffset);
        var selection = window.getSelection();
        selection.addRange(range);
        // get html for your div  
        var myDiv = document.getElementById('MyEditableId');
        alert(myDiv.innerHTML);
    });

只需将代码中的警告行更改为以下即可。。

alert($.trim($('<div>').append(range.cloneContents()).html()));

我刚刚浏览了Range和selection的文档。您可以使用Range对象支持的extractContents()或cloneContents()方法，就像在您的案例中一样Demo:

 var fragment = window.getSelection().getRangeAt(0).extractContents();

这会自动获取用户选择的第一个范围。尽管用户可以通过按住"Ctrl"键来选择多个范围。对于更简单的情况，这将提供精确的匹配，直到光标位置。

不过也有一些注意事项。方法extractContents()或cloneContents()都返回一个documentFragment，并且文档明确指出：

在克隆过程中，不会复制使用DOM事件添加的事件侦听器。HTML属性事件与DOM Core cloneNode方法的情况相同。HTML id属性也被克隆，可以通过克隆导致无效文档。

本质上，文档片段可以包含无效的HTML，因此在某些情况下不能像.html()一样使用所有正常的DOM。

我找到了一篇关于在contentEditable元素上获取光标位置的相关SO文章，并遇到了一个TextRange对象（在IE<9中支持），它有一个htmlText属性，它将所选内容的HTML源作为"有效"HTML片段返回。所以在这种情况下，你会做一些类似的事情：

 var fragment = document.selection.createTextRange().htmlText;

然而，由于大多数现代浏览器都支持Window.getSelection()，因此使用它并在您可以使用的合适方法的基础上进行构建是一种很好的做法。希望它能让你朝着正确的方向开始。

旁注-也来自文档：

使用选择对象作为window.alert的参数将调用对象的toString方法

相关文章：