JavaScript - Get HTML z bieżącej linii w contentEditable div

Question

Mam moje contentEditablediv:

div { 
 
    width: 200px; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
}

<div contenteditable="true" spellcheck="false" style="font-family: Arial;"> 
 
    <b>Lorem ipsum</b> dolor sit amet, <u>consectetur adipiscing elit. 
 
    Morbi sagittis</u> <s>mauris porta arcu auctor, vel aliquam ligula ornare.</s> 
 
    Sed at <span id="someId">semper neque, et dapibus metus. 
 
    Maecenas dignissim est non nunc feugiat</span> 
 
    sollicitudin. Morbi consequat euismod consectetur. Mauris orci 
 
    risus, <b>porta quis erat ac, malesuada</b> fringilla odio. 
 
</div> 
 
    
 
<button>Get current line HTML</button>

I chcę, aby utworzyć przycisk, który daje mi kod HTML z prądem linia. Na przykład:
Kiedy mój daszek jest na drugiej linii chcę uzyskać:

amet, <u>consectetur</u> 

lub na siódmej linii:

<span id="someId">dapibus metus. Maecenas</span> 

Próbowałem to zrobić za pomocą Rangy, ale to nie praca. Jak mogę to zrobić za pomocą JavaScript i/lub JQuery?
Dzięki za pomoc.

Answer 1

Nie zakodowam Ci pełnego skończonego kodu, ale oto dobra pomoc, która da ci wynik.

Najpierw musisz uzyskać metodę do wyznaczania linii. Sugeruję, aby przyjrzeć się odpowiedzi w tym stackoverflow: How to select nth line of text (CSS/JS) Z tego można uzyskać numer linii dla określonego słowa.

Jakie słowo Twój daszek jest można uzyskać z tych informacji: How can I get the word that the caret is upon inside a contenteditable div?

Łącząc funkcjonalność numer zgodne z aktualnymi karetki słowo będzie można wrócić do pełnej wiersz gdzie jest karetka.

Answer 2

To rozwiązanie oparte jest na przykład proponowany przez Mozilla w Selection.modify(), stosując lineboundary ziarnistość i odtwarzania z move i extend zmienić parametr.

Aby zachować pozycję karetki, zakres wyboru jest zapisywany/odtwarzany.

Odtwórz przy użyciu width zawartości, edytuj fragment kodu i sprawdź go.

Masz swój kod HTML.

function getSelectionHtml() { 
 
    var selection = window.document.selection, 
 
    range, oldBrowser = true; 
 

 
    if (!selection) { 
 
    selection = window.getSelection(); 
 
    range = selection.getRangeAt(0); 
 
    oldBrowser = false; 
 
    } else 
 
    range = document.selection.createRange(); 
 

 
    selection.modify("move", "backward", "lineboundary"); 
 
    selection.modify("extend", "forward", "lineboundary"); 
 

 
    if (oldBrowser) { 
 
    var html = document.selection.createRange().htmlText; 
 
    range.select(); 
 
    return html; 
 
    } 
 

 
    var html = document.createElement("div"); 
 

 
    for (var i = 0, len = selection.rangeCount; i < len; ++i) { 
 
    html.appendChild(selection.getRangeAt(i).cloneContents()); 
 
    } 
 

 
    selection.removeAllRanges(); 
 
    selection.addRange(range); 
 
    return html.innerHTML; 
 
} 
 

 
document.getElementById("content").onmouseup = function(e) { 
 
    var html = getSelectionHtml(); 
 
    document.getElementById("text").innerHTML = html; 
 
    document.getElementById("code").textContent = html; 
 
};

h4, 
 
p { 
 
    margin: 0; 
 
} 
 

 
#code { 
 
    width: 100%; 
 
    min-height: 30px; 
 
} 
 

 
#content { 
 
    margin: 15px; 
 
    padding: 2px; 
 
    width: 200px; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
}

<textarea id="code"></textarea> 
 
<div id="text"></div> 
 

 
<div contenteditable="true" id="content" spellcheck="false" style="font-family: Arial;"> 
 
    <b>Lorem ipsum</b> dolor sit amet, <u>consectetur adipiscing elit. 
 
    Morbi sagittis</u> <s>mauris porta arcu auctor, vel aliquam ligula ornare.</s> Sed at <span id="someId">semper neque, et dapibus metus. 
 
    Maecenas dignissim est non nunc feugiat</span> sollicitudin. Morbi consequat euismod consectetur. Mauris orci risus, <b>porta quis erat ac, malesuada</b> fringilla odio. 
 
</div>