Question

我有一个具有一些嵌套跨度的contenteditable元素，以在其中提供样式。我需要找出在elemebt的任何给定偏移量下css类是什么。例如，我可能会有这样的事情：

<div contenteditable>
     <span class"nothing">    </span>
     <span class="outer">my <span class="other">name</span> is </span><span class="name">Andrew</span>
</div>

屏幕上的文字看起来像这样（有适当的样式）：

my name is Andrew

现在，想象一下，可信区域可能更大，并且有许多嵌套的span元素。在任何给定给定文本的偏移量时，我需要能够计算包含它的css类。

例如，假设我需要偏移4处的css样式，即n的{{1}}。我希望结果是：

name

一个等效的解决方案是，如果给定一个偏移量（比如outer other），我可以计算包裹该位置的html元素（在这种情况下，它将是：

我正在使用jquery，但没有其他库。我怎样才能轻松计算出来？

编辑：我之前使用的是textarea，但这不起作用。我应该使用一个contenteditable div元素。

Answer 1

我建议插入一个临时虚拟跨度，用Jquery抓取它，然后提升parents将类列表推送到一个数组，直到你击中外部容器。当然，如果您只想要currentStyle，那就更容易了。

至于如何将你的虚拟跨度带入textarea，如果你只有一个角色位置，请参阅Insert text into textarea at cursor position (Javascript)。如果要插入插入符号，请参阅Insert text into textarea with jQuery。

Answer 2

你不能用textarea做到这一点。其中的任何内容都将被视为文本，而不是标记。你应该研究“满足”的元素。

如何计算一个偏移到一个contenteditable元素的CSS样式？

2 个答案: