如何在contentEditable-DIV中获取HTML-Code

时间:2014-10-15 09:52:34

标签: javascript jquery html css

在contentEditable-DIV中,我尝试从strat-Position 0获取HTML-Code到用户点击的结束位置。

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

如何在contentEditable-DIV中获取HTML代码而不是文本? 在此先感谢。

3 个答案:

答案 0 :(得分:1)

您可以选择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);
    });

答案 1 :(得分:1)

只需将代码中的警报行更改为低于正常值即可。

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

答案 2 :(得分:0)

我刚刚浏览了Rangeselection的文档。您可以使用extractContents()对象支持的cloneContents()Range方法,例如Demo

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

这会自动获取用户选择的第一个范围。虽然用户可以通过按住&#34; Ctrl&#34;来选择多个范围。键。对于更简单的情况,这给出了光标位置的精确匹配。

虽然有一些警告。方法extractContents()cloneContents()都返回documentFragment,文档明确指出:

  

在克隆过程中不会复制使用DOM事件添加的事件监听器。 HTML属性事件与DOM Core cloneNode方法一样重复。 HTML id属性也会被克隆,可以通过克隆导致无效文档

从本质上讲,文档片段可以包含无效的HTML,因此在某些情况下您无法使用所有正常DOM .html()

我找到一个relevant SO post获取光标在contentEditable元素上的位置并且遇到了TextRange Object(在IE&lt; 9中支持)并且它有一个htmlText属性返回选择的HTML源代码有效&#39; HTML片段。所以在这种情况下你会做类似的事情:

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

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

Sidenote - 同样来自docs

  

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