Проблемы с CTRL + V в HTML

Question

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

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

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

Answer 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>

Answer 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>

БЛОГ НА HUSL

Проблемы с CTRL + V в HTML

Ответы (2 шт):