当在内容可编辑div中使用onPaste时，新行将变为空的div，例如<div> </div>，而不是<div> <br/> </div>

Question

我正在研究一个内容可编辑的div，作为一个主意，这似乎是一场噩梦。

我的问题是：

我正在拦截粘贴事件，因为我应该只允许使用纯文本/

。

任何空行应显示为：<div><br></div>，但是当您复制多行并将其粘贴到内容可编辑的div周围时，您会在控制台中看到一些空行被渲染为空div就像<div></div>。 （请全屏查看下面的测试代码段，以查看控制台）。参见下面的图片。

我想这与换行符有关。

如何防止这种情况发生，并确保如果一行为空，它将变为：

<div><br></div>吗？

注意：：我不使用jQuery。

测试代码段

function handleInput() {
  console.log('DIV innerHTML: ');
  console.log(document.getElementById('root').innerHTML);
 }
 
function handlePaste(e) {
  e.preventDefault();
  // GET TEXT REPRESENTATION OF CLIBOARD DATA
  let text = (e.originalEvent || e).clipboardData.getData('text/plain');
  console.log('THIS IS BEING PASTEEEEEEEEEEEEEEEED! ' + text);
  text = text.replace('\r\n','\n');
  text = text.replace('\r','\n');
  // INSERT TEXT MANUALLY
  document.execCommand("insertText", false, text);
}

#root {
  border: 1px dotted blue;
}

<p>Copy and paste multiple lines including empty ones</p>
<div id="root" contenteditable oninput="handleInput()" onpaste="handlePaste(event)">
  <div>123</div>
  <div><br></div>
  <div><br></div>
  <div>123</div>
</div>

Answer 1

问题是我尝试替换\r和\n字符的方法的事实。我还需要将其替换为两个\n，以便每个换行符在内容可编辑的<br>

中都收到一个div

这是我解决的方法：

function onPaste(e) {
    e.preventDefault();
    // GET TEXT REPRESENTATION OF CLIBOARD DATA
    let text = (e.originalEvent || e).clipboardData.getData('text/plain');
    console.log('Text before replace:');
    console.log(text);
    console.log(text.split('\n'));
    text.split('\n').forEach((item)=>console.log(JSON.stringify(item)));

    text = text.replace(/(?:\\[rn]|[\r\n]+)+/g,'\n\n');


    console.log('Text after replace:');
    console.log(text);
    console.log(text.split('\n'));
    text.split('\n').forEach((item)=>console.log(JSON.stringify(item)));

    // INSERT TEXT MANUALLY
    document.execCommand("insertText", false, text);
  }

具有工作解决方案的片段

function handleInput() {
  console.log('DIV innerHTML: ');
  console.log(document.getElementById('root').innerHTML);
 }
 
function handlePaste(e) {
  e.preventDefault();
  // GET TEXT REPRESENTATION OF CLIBOARD DATA
  let text = (e.originalEvent || e).clipboardData.getData('text/plain');
  
  text = text.replace(/(?:\\[rn]|[\r\n]+)+/g,'\n\n');
  
  // INSERT TEXT MANUALLY
  document.execCommand("insertText", false, text);
}

#root {
  border: 1px dotted blue;
}

<p>Copy and paste multiple lines including empty ones</p>
<div id="root" contenteditable oninput="handleInput()" onpaste="handlePaste(event)">
  <div>123</div>
  <div><br></div>
  <div><br></div>
  <div>123</div>
</div>