Как отобразить номер строки рядом с каждой строкой на contenteditable div

Question

У меня есть спорный div, и я хочу, чтобы сайт подсчитывал каждую строку текста, которую пользователь имеет в div, аналогично многим IDE кодирования. (Пример изображения ниже, чтобы показать, что я имею в виду :)

Как бы я go сделал это?

Answer 1

Вы можете сделать это sh с помощью двух элементов контейнера и небольшого количества сценариев:

$(document).ready(function(){
  $('#edit').css('min-height', $('#edit').height());
  $('#edit').html('');
  var currentHeight = $('#edit').height();
  var lineHeight = currentHeight;
  $('#edit').keyup(function(){
    if($(this).height()!=currentHeight){
      currentHeight = $(this).height();
      var lines = currentHeight/lineHeight;
      $('#nums').html('')
      for (i = 1; i < lines+1; i++) {
        $('#nums').append('<span>'+i+'</span>')
      }
    }
  });
});

#container{
  border: 2px solid gray;
  display: flex;
  width: 200px;
}

#nums{
  width: 25px;
  background-color: lightgrey;
}

#nums span{
  width: 100%;
  display: block;
  text-align: center;
}

#edit{
  display: inline-block;
  width: 100%;
}

#editwrapper{
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="nums">
    <span>1</span>
  </div>
  <div id="editwrapper">
    <div id="edit" contenteditable="true">
      filler
    </div>
  </div>
</div>

Answer 2

Это не так просто, на самом деле. Если пользователь ввел ваш div и текст обернут, JavaScript не знает, что он обернут; нет строки для подсчета!

Это решение суперспецифично c, и я оставлю показывать вам номера строк:

<div contenteditable="true" id="myDiv" style="width:300px;font-family:monospace" onchange="myHandler()"></div>

<script>
const limit = 40 // number of monospace chars to fill a row
let count = 0
function myHandler (e) {
  let lines = Math.ceil(e.target.value.length / limit)
  if (lines !== count) {
    showlines(lines) // your function to display the line #s
    count = lines
  }
}
</script>

Вывод: ваш div должен быть фиксированным ширина, и вы должны посчитать, сколько моноширинных символов вписываются в эту ширину. Затем отобразите эти строки.