获取contentEditable目录中当前行的JavaScript
获取contentEditable目录中当前行的JavaScript
提问于 2017-09-16 20:25:49
我有我的contentEditable div：
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>或在第七行：
<span id="someId">dapibus metus. Maecenas</span>我试着用Rangy来做这件事，但是不起作用。如何使用JavaScript和/或JQuery实现这一点？
谢谢你的帮助。
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-09-20 15:35:38
我不会给你编码完整的代码，但这里有很好的帮助，可以让你得到结果。
首先，您需要获取一种用于计算线条的方法。我建议查看这个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?
将行号功能与当前插入符号单词相结合，您将能够在插入符号所在的位置返回整行。
Stack Overflow用户
发布于 2017-09-20 20:09:40
此解决方案基于Mozilla在Selection.modify()中提出的示例，但使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46253901
复制相关文章
相似问题
腾讯云开发者
