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

【问题标题】：Adding Un-editable text to the end of each line of a contentEditable div将不可编辑的文本添加到 contentEditable div 的每一行的末尾
【发布时间】：2011-12-10 14:21:05
【问题描述】：

我有一个内容可编辑的 div，但我想在每行的末尾添加一些不可编辑、不可选择的文本字符。我在下面模拟了一个示例，它添加了一条注释，说明该行中的所有单词是否拼写正确：

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

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

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

【问题讨论】：

标签： javascript text html text-editor contenteditable

【解决方案1】：

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

它可能类似于this example at jsFiddle。

更新

根据您的需要，这里有一种不同的方法可能会奏效：see jsFiddle here。

在第二种方法中，我将每一行拆分为自己的<div>，并在每行的 div 后面加上 <span contentEditable=false>(Good!). I've floated everything to the left, with aclear:left`线。这正是你想要的（至少在 webkit 浏览器中）——只要你能像那样分割你的行。

【讨论】：

太棒了，这正是我试图创造的行为！ :)
问题：如何在每次用户添加新行或点击回车时创建一个新的 div 和（好！）span？
您必须对其进行微调以使其变得更好，但here's an updated jsFiddle 显示了基本思想。
我尝试在我的服务器上测试它，但我无法让 jQuery 工作：unlock-guide.com/write/editor.html。你碰巧知道为什么吗？我需要使用 .ready() 吗？这是我第一次使用 jQuery，对于速度缓慢感到抱歉。
是的。就目前而言，javascript 代码是在构建 html 文档之前执行的。因为当时#edit div 还不存在，所以 DOMNodeInserted 事件永远不会被绑定。要解决这个问题，您需要将代码包装在 $(document).ready(function(){ ... }) 中或将脚本块移动到 <body> 元素的底部。

【解决方案2】：

您应该在 contentEditable div 的顶部添加一个 div（z-index 大于 content div），并带有文本“Good！”、“Error”等。这样，内容将无法通过 contentEditable 进行编辑分区。

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

【讨论】：