如何避免contenteditable div中输入内容继承标签颜色？

问题描述 #

在设置了contenteditable="true"的div中，给指定的HTML标签相关关键词（如DIV、H1、P、<、>、/）设置红色后，在这些标签后输入的内容（包括空格后的文字）会意外继承红色，而预期输入的文字应保持#editor CSS中设置的黑色。同时需要保证解决方案不破坏光标位置，且支持后续添加其他颜色标签。

原因分析 #

1. 样式继承漏洞：原代码中非关键词内容被包裹在.other span中，但未显式设置颜色继承父元素，导致光标落在红色标签相邻区域时，输入内容继承红色样式。
2. 光标位置丢失：重新设置innerHTML会重置光标，原代码强制将光标移到最后一个子元素的固定位置，逻辑错误且破坏输入体验。
3. 关键词匹配错误：原代码使用转义后的<作为关键词，但innerText获取的是实际<字符，导致匹配不准确。
4. 事件触发滞后：onchange事件在contenteditable元素中触发时机晚，无法实时更新样式。

修改后的代码 #

JavaScript代码 #

// 保存光标位置
function saveCursorPosition(element) {
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return null;
  const range = selection.getRangeAt(0);
  const preSelectionRange = range.cloneRange();
  preSelectionRange.selectNodeContents(element);
  preSelectionRange.setEnd(range.startContainer, range.startOffset);
  const start = preSelectionRange.toString().length;
  return { start, end: start + range.toString().length };
}

// 恢复光标位置
function restoreCursorPosition(element, pos) {
  if (!pos) return;
  const selection = window.getSelection();
  const range = document.createRange();
  range.setStart(element, 0);
  range.collapse(true);
  const textNode = element.firstChild;
  let currentLength = 0;
  let found = false;

  function traverseNodes(node) {
    if (found) return;
    if (node.nodeType === Node.TEXT_NODE) {
      const nodeLength = node.length;
      if (currentLength + nodeLength >= pos.start) {
        range.setStart(node, pos.start - currentLength);
        range.setEnd(node, pos.end - currentLength);
        found = true;
        return;
      }
      currentLength += nodeLength;
    } else {
      for (let i = 0; i < node.childNodes.length; i++) {
        traverseNodes(node.childNodes[i]);
        if (found) break;
      }
    }
  }

  traverseNodes(element);
  selection.removeAllRanges();
  selection.addRange(range);
  element.focus();
}

function applyColoring(element) {
  // 使用实际字符而非转义符，确保匹配准确
  const keywords = ["DIV", "H1", "P", "<", ">", "/"];
  const str = element.innerText;

  // 分割字符串，保留关键词与非关键词片段
  const chunks = str.split(new RegExp(keywords.map(w => `(${w})`).join("|"), "i")).filter(Boolean);
  
  const markup = chunks.reduce((acc, chunk) => {
    // 忽略大小写匹配关键词
    const isKeyword = keywords.some(key => chunk.toUpperCase() === key.toUpperCase());
    if (isKeyword) {
      acc += `<span class="statement">${chunk}</span>`;
    } else {
      // 非关键词包裹在继承样式的span中
      acc += `<span class="other">${chunk}</span>`;
    }
    return acc;
  }, "");
  
  element.innerHTML = markup;
}

function changeColor() {
  const editor = document.getElementById("editor");
  // 先保存光标位置，避免更新HTML后丢失
  const cursorPos = saveCursorPosition(editor);
  applyColoring(editor);
  // 恢复光标到原有位置
  restoreCursorPosition(editor, cursorPos);
}

function showPreview() {
  const editorContent = document.getElementById("editor").innerText;
  const frame = document.getElementById("preview-window");
  const dataURL = "data:text/html;charset=utf-8," + encodeURIComponent(editorContent);
  frame.src = dataURL;
}

// 初始化页面时应用着色与预览
changeColor();
showPreview();

CSS代码 #

#editor {
  width: 456px;
  height: 267px;
  padding: 10px;
  background-color: #ffffff;
  color: black;
  font-size: 14px;
  font-family: monospace;
  white-space: pre;
}

.statement {
  color: rgb(212, 42, 42);
}

.other {
  /* 显式继承父元素颜色，确保非关键词内容为黑色 */
  color: inherit;
}

HTML代码 #

<div id="editor" contenteditable="true" oninput="showPreview(); changeColor();">
  &lt;h1&gt;This is a Heading&lt;/h1&gt; &lt;p&gt;This is a paragraph.&lt;/p&gt;
</div>

<h3>PREVIEW</h3>
<div class="preview-area">
  <iframe id="preview-window"></iframe>
</div>

关键修改说明 #

• 光标保护：新增saveCursorPosition和restoreCursorPosition函数，在更新HTML前后保存、恢复光标位置，避免光标跳转或丢失。
• 样式修复：给.other类添加color: inherit，强制非关键词内容继承父元素的黑色，阻断红色样式的意外继承。
• 匹配修正：将关键词数组改为实际字符，确保与innerText中的内容准确匹配。
• 事件优化：将onchange改为在oninput事件中同时触发样式更新与预览，实现实时响应输入。
• 扩展性支持：后续添加其他颜色标签时，只需新增对应的CSS类，并在applyColoring中扩展关键词匹配逻辑即可。

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