Question

我正在创建一个简单的应用程序，您可以在其中更改段落中每个字母的颜色。

现在，我使用lettering.js来包装带有跨度的默认文本，这很容易，但是当每个跨度都有contenteditable并且我想要将新文本节点用跨度包装时重点突出。

例如，假设我想在这个阶段用每个跨度包装每个文本节点。

<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>

已经完成了，但是如果有新的字母怎么办？

用lettering.js输出

<div aria-label="Username" class="text">
    <span class="char4">U</span>
    <span class="char5">srrw</span>
    <span class="char6">eww</span>
    <span class="char7">r</span>
    <span class="char8">nw</span>
    <span class="char9" style="color: red;">arww</span>
    <span class="char10">mer</span>
    <span class="char11">eee</span>
    <span class="char12"></span>
    <span class="char13"></span>
</div>

注意每个节点中的新样式属性和更多字母。每个字母都可以更改颜色，并且可以添加更多文字。

现在，我可以像这样重复使用letters.js：

function setTextNodes() {
    $(".text").lettering();
}

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

<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>

所以：

用跨度包裹默认字母（已完成）
选择一个字母，为跨度添加contenteditable并更改其颜色（已完成）
如果添加了更多的字母，请用<span>包裹这些字母，但保留样式（字体.js不会）
我也应该能够编辑那些文本新文本节点（点击它们上的事件）

我该怎么做？

这是我到目前为止所得到的。您可以使用颜色调色板来更改颜色。 http://codepen.io/anon/pen/KVgoZa

Answer 1

为了满足您的需求，重要的是必须像lettering()那样再次转换刚编辑过的（和彩色的）字符（或字符集）。

所以解决方案是改变你的setTextNodeColor()函数：

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

它将当前<span>替换为“字母”<span>组，然后应用选择的颜色。注意：此方法会导致lettering()影响从char1到charN的新类，因此这有点不协调。但是在你的特殊情况下，这并不重要，因为你没有像通常使用lettering那样使用它们。

这是working example。

如果出现新文本，则包含带有span的文本节点和带有跨度的内部文本节点

1 个答案: