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

Question

In a contentEditable-DIV I try to get the HTML-Code from strat-Position 0 to end-position where the user has clicked.

<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>

Something as below code snippet, which delivers the text from 0 to end of clicked node. But I need also the HTML-Code in contentEditable-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);

    // 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() );
});

I expect for the result something as follows:

 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"

How can I get the HTML-Code instead of text in my contentEditable-DIV? Thanks In Advance.

Answer 1

You can select the div and use its property 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);
    });

Answer 2

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

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

Answer 3

I was just going through the documentation for Range and selection . You could use the extractContents() or cloneContents() method supported by the Range object like so in your case Demo :

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

This automatically gets the first range that the user has selected. Although users can select multiple ranges by holding down the "Ctrl" Key. This gives the exact match till the cursor position for the simpler cases.

There are some caveats to this though. Both the methods extractContents() or cloneContents() return a documentFragment and the documentation clearly states that:

Event Listeners added using DOM Events are not copied during cloning. HTML attribute events are duplicated as they are for the DOM Core cloneNode method. HTML id attributes are also cloned, which can lead to an invalid document through cloning.

In essence, document fragments can contain invalid HTML and therefore you can not use all the normal DOM like .html() in some cases.

I found a relevant SO post on getting the cursor position on a contentEditable element and came across a TextRange Object (supported in IE < 9) and it has an htmlText property which returns the HTML source of the selection as a 'valid' HTML fragment. So in that case you would do something like:

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

However since most of the modern browsers support Window.getSelection() , it's good practice that you use it and build upon the suitable methods you have at your disposal. Hope it gets you started in the right direction.

Sidenote - Also from the docs :

using a selection object as the argument to window.alert will call the object's toString method