如何在可编辑文本框中实现单词渐变色效果并保留格式功能

你的核心问题在于原方案通过innerText拆分文本并重建纯HTML结构，直接丢失了所有格式和换行信息。要解决这个问题，需要基于DOM节点遍历处理单词，同时保留原有格式结构，以下是具体实现方案：

1. 核心思路 #

• 不再清空编辑器innerHTML，而是遍历所有文本节点，拆分单词并为每个单词添加“年龄标记”（data-age属性）
• 保留原文本的父元素（如<b>、<i>、带字号的<span>），确保格式不丢失
• 使用CSS根据data-age控制单词的透明度/颜色，实现渐变效果
• 原生contenteditable支持基础格式操作，无需依赖第三方编辑器

2. 实现代码 #

CSS样式（定义渐变规则） #

/* 最近3个单词为黑色 */
.word[data-age="0"], 
.word[data-age="1"], 
.word[data-age="2"] {
  color: #000;
}
/* 中间5个单词逐渐变淡 */
.word[data-age="3"] { opacity: 0.8; }
.word[data-age="4"] { opacity: 0.6; }
.word[data-age="5"] { opacity: 0.4; }
.word[data-age="6"] { opacity: 0.2; }
.word[data-age="7"] { opacity: 0.1; }
/* 更早的单词变为白色 */
.word[data-age="8"],
.word[data-age="9"] {
  color: #fff;
}
/* 保留基础格式的继承 */
.word b, .word i, .word span[style] {
  color: inherit;
  opacity: inherit;
}

JavaScript逻辑（处理文本和格式） #

const editor = document.querySelector('#editor');
editor.setAttribute("data-placeholder", getRandomPlaceholder(placeholderTexts));
editor.spellcheck = false;
editor.focus();
editor.blur();

// 防抖函数，避免input事件频繁触发导致性能问题
function debounce(fn, delay = 100) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

// 处理编辑器内容：拆分单词、保留格式、添加年龄标记
function processEditorContent() {
  // 收集所有文本片段（单词+空格）和它们的父元素
  const contentParts = [];
  const walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT, null, false);
  let currentNode;

  // 遍历所有文本节点，拆分内容并记录上下文
  while (currentNode = walker.nextNode()) {
    if (currentNode.textContent.trim() === '') continue;
    // 按空格拆分，保留空格本身
    const parts = currentNode.textContent.split(/(\s+)/);
    parts.forEach(part => {
      if (part.trim() === '') {
        contentParts.push({ type: 'space', content: part });
      } else {
        contentParts.push({ 
          type: 'word', 
          content: part, 
          parent: currentNode.parentNode.cloneNode(false) // 复制父元素的标签和属性
        });
      }
    });
    // 移除原文本节点（后续重建）
    currentNode.parentNode.removeChild(currentNode);
  }

  // 计算每个单词的年龄：最新的单词age为0，依次递增
  const wordCount = contentParts.filter(p => p.type === 'word').length;
  let currentAge = wordCount - 1;

  // 重新构建编辑器内容
  contentParts.forEach(part => {
    if (part.type === 'space') {
      editor.appendChild(document.createTextNode(part.content));
    } else {
      // 创建单词容器，保留原格式
      const wordSpan = document.createElement('span');
      wordSpan.className = 'word';
      wordSpan.dataset.age = Math.max(0, currentAge);
      wordSpan.textContent = part.content;
      // 将单词放入原格式的父元素中
      part.parent.appendChild(wordSpan);
      editor.appendChild(part.parent);
      currentAge--;
    }
  });

  // 将光标移到内容末尾
  const range = document.createRange();
  const selection = window.getSelection();
  range.selectNodeContents(editor);
  range.collapse(false);
  selection.removeAllRanges();
  selection.addRange(range);
}

// 绑定防抖后的input事件
editor.addEventListener('input', debounce(processEditorContent));

// 实现基础格式操作（示例：粗体、斜体、字号调整）
document.querySelector('#bold-btn').addEventListener('click', () => {
  document.execCommand('bold', false, null);
  processEditorContent(); // 手动触发一次格式更新
});

document.querySelector('#italic-btn').addEventListener('click', () => {
  document.execCommand('italic', false, null);
  processEditorContent();
});

document.querySelector('#font-size-btn').addEventListener('click', () => {
  const size = prompt('输入字号（如16px）');
  if (size) {
    document.execCommand('styleWithCSS', false, true);
    document.execCommand('fontSize', false, size);
    processEditorContent();
  }
});

3. 关键优势 #

• 保留格式：所有粗体、斜体、字号设置都会被保留，因为我们复制了原文本的父元素结构
• 支持换行：编辑器原生生成的<p>、<div>、<br>等换行元素不会被修改，完全保留
• 性能可控：使用防抖函数减少DOM操作频率，避免输入卡顿
• 原生兼容性：基于contenteditable原生API，无需引入第三方编辑器，体积小

4. 注意事项 #

• 如果需要更精准的光标位置恢复，可以在处理前记录光标相对于单词的位置，处理后重新定位
• 对于复杂格式（如列表、链接），可以在遍历节点时跳过特定标签（如<ul>、<a>），避免破坏结构

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