首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >获取contentEditable目录中当前行的JavaScript

获取contentEditable目录中当前行的JavaScript
EN

Stack Overflow用户
提问于 2017-09-16 20:25:49
回答 2查看 2.7K关注 0票数 18

我有我的contentEditable div

代码语言:javascript
复制
div {
  width: 200px;
  height: 300px;
  border: 1px solid black;
}
代码语言:javascript
复制
<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代码。例如:

当我的插入符号在第二行时,我想得到:

代码语言:javascript
复制
amet, <u>consectetur</u>

或在第七行:

代码语言:javascript
复制
<span id="someId">dapibus metus. Maecenas</span>

我试着用Rangy来做这件事,但是不起作用。如何使用JavaScript和/或JQuery实现这一点?

谢谢你的帮助。

EN

回答 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?

将行号功能与当前插入符号单词相结合,您将能够在插入符号所在的位置返回整行。

票数 8
EN

Stack Overflow用户

发布于 2017-09-20 20:09:40

此解决方案基于Mozilla在Selection.modify()中提出的示例,但使用lineboundary粒度并使用moveextend alter参数。

为了保留插入符号的位置,选择的范围被存储/恢复。

播放内容的width,编辑代码片段并将其签出。

你得到了你的HTML。

代码语言:javascript
复制
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;
};
代码语言:javascript
复制
h4,
p {
  margin: 0;
}

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

#content {
  margin: 15px;
  padding: 2px;
  width: 200px;
  height: 300px;
  border: 1px solid black;
}
代码语言:javascript
复制
<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>

票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/46253901

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档