2

У меня есть <div> с параметром contenteditable
При использовании ctrl + v в него вставляется текст с визуальными эффектами из других сред, что выглядит некрасиво и непрактично:

До вставки

После вставки

Как можно это исправит и вставлять только текст, без всего прочего?

P.s. пожалуйста, не пишите мне про ctrl + shift + v, т.к. я хочу сделать всё автоматически и интуитивно

1
  • Под этот вопрос, можно же было сделать воспроизводимый пример
    – Dmytro
    22 ноя 2021 в 21:18

2 ответа 2

2

Это не то что бы проблема, а скорее особенность свойства contenteditable.

Вот такой вариант есть:

document.querySelector('.clear[contenteditable]').addEventListener('paste', (e) => {
  e.preventDefault();
  const text = (e.originalEvent || e).clipboardData.getData('text/plain');
  window.document.execCommand('insertText', false, text);
});
div[contenteditable] {
  padding: 20px;
  background: #f5f5f5;
  margin-bottom: 10px;
}
<div class="clear" contenteditable="true">Тут только обычный текст</div>

1
  • document.execCommand() имеет статус deprecated.
    – DiD
    23 ноя 2021 в 8:18
1

UPD: После переписки в комментариях, я решил переработать неполноценный вариант

let edit = document.getElementById('edit');

String.prototype.splice = function(idx, rem, str) {
  return this.slice(0, idx) + str + this.slice(idx + Math.abs(rem));
};

edit.addEventListener('paste', paste);

function paste(e) {
  let buf, data;
  e.stopPropagation();
  e.preventDefault();
  buf = e.clipboardData || window.clipboardData;
  data = buf.getData('Text');
  let startIdx = getStartIdx(edit);
  let endIdx = window.getSelection().toString().length;
  edit.innerText = edit.innerText.splice(startIdx, endIdx, data);  
}

function getStartIdx(el) {
  let start = 0;
  let sel, rng, rngTxt;
  if (typeof window.getSelection != "undefined") {
      rng = window.getSelection().getRangeAt(0);
      rngTxt = rng.cloneRange();
      rngTxt.selectNodeContents(el);
      rngTxt.setEnd(rng.startContainer, rng.startOffset);
      start = rngTxt.toString().length;
  } else if (typeof document.selection != "undefined" &&
          document.selection.type != "Control") {
      sel = document.selection
      rng = sel.createRange();
      rngTxt = document.body.createTextRange();
      rngTxt.moveToElementText(el);
      rngTxt.setEndPoint("EndToStart", rng);
      start = rngTxt.text.length;
  }
  return start
}

//execCommand устарел данная функция используется исключительно для удобства копирования в примере
function copyContent (event) {  
  let div = document.getElementById("style");
  let range = document.createRange();
  range.selectNode(div.childNodes[0]); 
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);      
  document.execCommand('copy');  
  window.getSelection().removeAllRanges();
  div.innerText="Ok";
  setTimeout(()=>{div.innerText="copy"}, 500);
}
document.getElementById('style').addEventListener('click', copyContent);
#style{
  background:red; 
  width:50px; 
  margin: 0 auto; 
  text-align: center;
  cursor: pointer;
}
#edit{
  border: solid 1px black
}
<div id='edit' contenteditable='true'>Paste</div>
<div id="style">copy</div>

9
  • document.execCommand() имеет статус deprecated.
    – DiD
    23 ноя 2021 в 8:18
  • Здесь он только для удобства и не имеет отношения к вопросу о проблеме вставки, копировать можно и через ctrl+c
    – Rudi
    23 ноя 2021 в 9:14
  • Проблема еще в том, что ваш алгоритм не удаляет выделенный текст, который должен заменить по комбинации Ctrl+V. И он вставляет текст исключительно в конец текущего.
    – DiD
    23 ноя 2021 в 11:53
  • Кроме того, если копировать-вставлять путём drag-n-drop, то есть захватя выделенный текст мышкой перенеся в нужное для вставки место, событие paste не отрабатывает.
    – DiD
    23 ноя 2021 в 12:05
  • @DiD да можно придумать чего угодно. В вопросе только этих выдумок нет. "должен заменить" в вопросе было указано, или сам придумал?
    – Rudi
    23 ноя 2021 в 12:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.