JavaScriptの - のcontentEditable divの

Question

に現在の行のHTMLを取得し、私は私のの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>

そして私は私の現在のHTMLコードを与えるのボタンを作成したいがライン。たとえば：

amet, <u>consectetur</u> 

または7行目：私のキャレットは私が取得したい二行目にあるとき
は

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

私はRangyを使用していることを実行しようとしましたが、それはしませんでした作業。 JavaScriptやJQueryを使ってどうすればいいですか？
ありがとうございました。

Answer 1

私は完全なコードをコード化しませんが、結果を得るための良い助けとなります。

まず、線を見つける方法を取得する必要があります。私はこのstackoverflowの答えを見てお勧めします：How to select nth line of text (CSS/JS) そこから特定の単語の行番号を取得することができます。あなたのキャレットがあなたの上にある何語

は、この情報から取得することができます：あなたはあなたのキャレットがある行全体を返すことができるようになり、現在のキャレットの単語と行番号の機能を組み合わせるHow can I get the word that the caret is upon inside a contenteditable div?

。

Answer 2

この溶液をSelection.modify()にMozillaが提案されている例に基づいて、しかしlineboundary粒度を使用しmoveとextend ALTERパラメータで再生されています。

キャレットの位置を保持するには、選択範囲が保存/復元されます。

コンテンツのwidthで遊んで、スニペットを編集して確認してください。

あなたはあなたの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>