Подтвердить что ты не робот

JavaScript - Получить HTML текущей строки в contentEditable div

У меня есть мой 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>

Ответ 1

Я не буду кодировать вам полный код, но вот хорошая помощь, которая даст вам результат.

Сначала вам нужно получить метод для определения линий. Я предлагаю посмотреть ответ в этом потоке stackoverflow: Как выбрать n-ю строку текста (CSS/JS) Из этого вы можете получить номер строки для определенного слова.

Какое слово у вас есть, вы можете получить от этой информации: Как я могу получить слово, в котором находится каретка внутри контентного div?

Объединяя функциональность номера строки с текущим словам каретки, вы сможете вернуть полную строку, где находится ваш карет.

Ответ 2

Это решение основано на примере, предложенном Mozilla в Selection.modify(), но с помощью lineboundary детализации и воспроизведения с помощью move и extend изменить параметры.

Чтобы сохранить позицию каретки, диапазон выбора сохраняется/восстанавливается.

Играйте с 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>