Javascript 使用跨距包装文本节点，如果出现新文本，则使用跨距包装内部文本节点

我正在做一个简单的应用程序，你可以改变段落中每个字母的颜色

现在，我使用letting.js用跨距来包装默认文本，这很容易，但当每个跨距都有contenteditable时就不行了，我想在新文本节点失去焦点时用跨距来包装它

举个例子，假设我想在这个阶段用一个span来包装每个文本节点

<div aria-label="Username" class="text">
    <span class="char4">U</span>
    <span class="char5">s</span>
    <span class="char6">e</span>
    <span class="char7">r</span>
    <span class="char8">n</span>
    <span class="char9">a</span>
    <span class="char10">m</span>
    <span class="char11">e</span>
    <span class="char12"></span>
    <span class="char13"></span>
</div>

但这会从已更改的文本节点中删除样式属性。所以，我希望预期结果应该是这样的：

<div aria-label="Username" class="text">
    <span class="char4">U</span>
    <span class="char5">s</span>
    <span class="char6">e</span>
    <span class="char7">r</span>
    <span class="char8">n</span>
    <span class="char9" style="color: red;">a<span>w</span><span>w</span></span>
    <span class="char10">m</span>
    <span class="char11">e</span>
</div>

  function setTextNodeColor(selectedColorElem){
    var colorName = selectedColorElem.data('color'),
        $oldSet = $('.selected');
    $($oldSet.lettering().html())
      .css('color', colors[colorName].hex)
      .replaceAll($oldSet);
  }

因此：

使用完成的跨距包装默认字母 选择一个字母，将contenteditable添加到跨度并更改其颜色 如果添加了更多的字母，也可以用“s”来包装这些字母，但是保持样式lettering.js不起作用 我应该也能够编辑这些文本新的文本节点，以及点击他们的事件 我该怎么做

---

这是我到目前为止得到的。有一个调色板可用于更改颜色

为了满足您的需要，重要的是一个刚刚编辑的彩色字符或一组字符必须像刻字一样再次转换

因此，解决方案是如下更改setTextNodeColor函数：

<div aria-label="Username" class="text">
    <span class="char4">U</span>
    <span class="char5">s</span>
    <span class="char6">e</span>
    <span class="char7">r</span>
    <span class="char8">n</span>
    <span class="char9" style="color: red;">a<span>w</span><span>w</span></span>
    <span class="char10">m</span>
    <span class="char11">e</span>
</div>

  function setTextNodeColor(selectedColorElem){
    var colorName = selectedColorElem.data('color'),
        $oldSet = $('.selected');
    $($oldSet.lettering().html())
      .css('color', colors[colorName].hex)
      .replaceAll($oldSet);
  }

它用字母集s替换当前，然后应用choosen颜色。 注意：这个方法会导致字母影响从char1到charN的新类，所以这有点不一致。但在您的特殊情况下，这并不重要，因为您没有像通常的文字那样将它们用于CSS

这是一本书