在 Ctrl+Enter 上可编辑的内容中插入新行

Question

我想在用户按 Ctrl+Enter 时在可编辑的内容中插入新行。

基于以下问题，我编写了以下代码：

• 在 contenteditable div 中按 Enter 键插入换行符
• 如何在 Javascript 字符串中插入 （回车符）？
• 处理内容可编辑DIV上的换行符
• 检测 JavaScript Range 对象中的换行符时出现问题

这是我的 HTML：

<span id="myInput" contenteditable="true" style="white-space: pre;"></span>

这是 JavaScript：

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

myInput.addEventListener('keypress', (event) => {
    if (event.key == 'Enter' && event.ctrlKey == true) {
    event.preventDefault();
    this.insertNewLine();     
   }
})


function insertNewLine(text) {

    var sel, range, html;
  sel = window.getSelection();
  range = sel.getRangeAt(0);
  range.deleteContents();
    
  // Do not always works
  var textNode = document.createTextNode("\n");
  
  // Always works
  //var textNode = document.createTextNode("\n\u200b");
    
  range.insertNode(textNode);
  range.setStartAfter(textNode);
  range.collapse(false);
  sel.removeAllRanges();
  sel.addRange(range);
}

当用户按下 Ctrl+Enter 时，行为有点奇怪：

• 在 Chrome 上，并不总是插入新行
• 在 Firefox 上，会插入新行，但插入符号不会跳转到下一行

我注意到，当在

\u200b

字符后面添加零宽度空格 (

\n

) 时，上述代码始终有效。

我做了一个JSFidle：https://jsfiddle.net/Alphonsio/atr7e2uw/27/

当然，我不想插入第二个字符。但我不明白为什么在第一种情况下没有插入新行（仅

\n

）。有人可以帮忙吗？

Answer 1

使用 < BR /> 代替

document.querySelector("button").addEventListener("click", function() {
  let s = document.querySelector("span");
  console.log("text: " + s.innerHTML);
  //s.textContent = "<br/>" + s.textContent;
  s.innerHTML = "<br/>" + s.innerHTML;
});

span {
  contenteditable: true;
  whitespace: pre;
}

<button>Click me</button>
<p contenteditable=false>ZZZ
<span contenteditable=true>ABC</span>
</p>