Textarea и Contenteditable - в чем разница? И почему selectionStart, selectionEnd не работают со вторым?

180

16 октября 2019, 09:00

Пытаюсь сделать личный HTML-редактор. С textarea всё работает как надо: (CodePen-1)
Если ничего не выделено - теги добавляются просто в конце напечатанного текста. А если выделить текст - при клике на кнопку, текст помещается внутри тегов.

<button title="division" class="tag" onclick="tag('<div>','</div>');">div</button>
<textarea id="form"></textarea>

JS:

function tag(a,b){
  var x = document.getElementById('form');
  x.focus();  
      var value = $("#form").val();
      var start=x.selectionStart;
      var end=x.selectionEnd;
      var selected = a + value.substr(start,end-start) + b;
  $("#form").val(  value.substr(0,start) + selected + value.substr(end)  );
}

Но внутренности Textarea невозможно покрасить или как-то выделить, поэтому есть необходимость сделать редактируемый div, в котором уже можно выделять ключевые слова или теги. Но selectionStart и selectionEnd не работают тут (CodePen-2):

<button title="division" class="tag" onclick="tag('<div>','</div>');">div</button>
<div id="form" contenteditable="true"></div>

JS:

function tag(a,b){
         var x = document.getElementById('form');
             var value = $("#form").text();
             var start = x.selectionStart;
             var end = x.selectionEnd;
                 var selected = a + value.substr(start,end-start) + b;
   $('#form').text(  value.substr(0,start) + selected + value.substr(end)  );
   x.focus();
}

Метод тыка не сработал и не понятно, что делаю не так. Видимо нужно просто знать...

Answer 1

Свойства selectionStart и selectionEnd объявлены непосредственно в элементах HTMLTextAreaElement и HTMLInputElement.

Так как в случае contenteditable элементом является div - эти свойства у него отсутствуют.

Для получения выделенного текста можно воспользоваться функцией getSelection

function tag(a, b) { 
  var x = document.getElementById('form'); 
  var value = $("#form").text(); 
  var selection = window.getSelection().getRangeAt(0); 
  var start = selection.startOffset; 
  var end = selection.endOffset; 
  var selected = a + value.substr(start, end - start) + b; 
  $('#form').text(value.substr(0, start) + selected + value.substr(end)); 
  x.focus(); 
}

.tag { 
  width: 90px; 
  border: 3px solid #800; 
  color: #800; 
  background-color: white; 
  margin: 0 0 10px 0; 
  padding: 5px; 
} 
 
#form { 
  width: 800px; 
  height: 150px; 
  background: rgb(255, 222, 159); 
  font-size: 18px; 
  border: 2px solid #800 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<button title="division" class="tag" onclick="tag('<div>','</div>');">div</button> 
<br> 
<div id="form" contenteditable="true"></div>