contenteditable div输入格式优化：首行包裹div或换行用br标签

方案一：让所有行都被div标签包裹 #

直接监听input和keydown事件，强制编辑器的每一行都用div包裹，避免首行出现纯文本节点：

<div contenteditable="true" id="editor"></div>

<script>
const editor = document.getElementById('editor');

// 初始化时先插入空div，避免编辑器为空时首行直接生成文本节点
if (editor.childNodes.length === 0) {
  const initDiv = document.createElement('div');
  initDiv.innerHTML = '<br>';
  editor.appendChild(initDiv);
}

// 输入时检查首行，把纯文本节点包裹进div
editor.addEventListener('input', () => {
  if (editor.firstChild && editor.firstChild.nodeType === Node.TEXT_NODE) {
    const textContent = editor.firstChild.textContent.trim();
    if (textContent) {
      const wrapDiv = document.createElement('div');
      wrapDiv.textContent = textContent;
      editor.replaceChild(wrapDiv, editor.firstChild);
    }
  }
});

// 处理回车事件，手动生成div，避免浏览器默认结构
editor.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    e.preventDefault();
    const newDiv = document.createElement('div');
    newDiv.innerHTML = '<br>';
    const selection = window.getSelection();
    const range = selection.getRangeAt(0);
    range.deleteContents();
    range.insertNode(newDiv);
    range.setStartAfter(newDiv);
    range.collapse(true);
    selection.removeAllRanges();
    selection.addRange(range);
  }
});
</script>

方案二：将换行替换为br标签 #

监听输入事件，把浏览器自动生成的div节点转换成br标签，让所有内容用br分隔：

<div contenteditable="true" id="editor"></div>

<script>
const editor = document.getElementById('editor');

editor.addEventListener('input', () => {
  // 遍历子节点，替换div为br
  const childNodes = Array.from(editor.childNodes);
  childNodes.forEach(node => {
    if (node.nodeName === 'DIV') {
      const text = node.textContent;
      // 先插入div内的文本
      if (text.trim()) {
        editor.insertBefore(document.createTextNode(text), node);
      }
      // 非最后一个节点插入br
      if (node !== editor.lastChild) {
        editor.insertBefore(document.createElement('br'), node);
      }
      // 删除原div
      editor.removeChild(node);
    }
  });

  // 合并相邻的文本节点，避免冗余
  let prevNode = null;
  const nodes = Array.from(editor.childNodes);
  nodes.forEach(node => {
    if (prevNode && prevNode.nodeType === Node.TEXT_NODE && node.nodeType === Node.TEXT_NODE) {
      prevNode.textContent += node.textContent;
      editor.removeChild(node);
    } else {
      prevNode = node;
    }
  });
});
</script>

两种方案都支持为文本不同部分设置颜色，比如直接选中部分文本，给它包裹带样式的span标签（<span style="color: red;">需要变色的内容</span>），不会破坏整体结构。

内容的提问来源于stack exchange，提问作者Copied