将不可编辑的文本添加到contentEditable div的每一行的末尾

Question

我有一个令人满意的div，但我想在每行的末尾添加一些不可编辑的，不可选择的文本字符。  我已经嘲笑了一个下面的例子，它添加了一个关于线上所有单词是否拼写正确的注释：

我的div是一个非常简单的contenteditable div：

<div contentEditable="true" designMode="on" id="edit" style="border: 1px dashed black; width: 700px; height: 400px"></div>

知道如何解决这个问题吗？感谢

Answer 1

也许您可以使用float:right在右侧定位您的好/坏标签，并让内容围绕它们流动。对齐与您的示例不完全相同，但它可能会起作用。

它可能看起来像this example at jsFiddle。

---

<强>更新

根据您的需要，以下是一种可能有效的方法：see jsFiddle here。

在第二种方法中，我将每一行拆分为自己的<div>，然后在div上使用<span contentEditable=false>(Good!) . I've floated everything to the left, with a clear：left`跟踪每一行的div，以便每个div都有自己的路线。这完全符合您的要求（至少在webkit浏览器中） - 只要您可以像这样分割您的行。

Answer 2

你应该在contentEditable div之上超级强加div（z-index大于content div），文本“Good！”，“Error”等。这样，内容将无法通过contentEditable进行编辑格。

您应该能够根据一行中的字符数和行号来计算div的位置。