允许用户发布内联评论答案

【问题标题】：Allowing users to post inline-comments允许用户发布内联评论
【发布时间】：2011-10-15 22:07:53
【问题描述】：

什么是允许用户在网页上的文本块中发布 inline-cmets 的有效方法？

例如，如果有这样的文章：

congue eget ipsum。 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus。

我希望网页的访问者能够对一些文本发表评论，他们可以在其中选择几个词并开始输入内联评论。有一个单词索引，所以每个单词都有一个数字是行不通的，因为可以编辑文本，然后单词编号就不准确了。

更改存储的文本并为每个评论添加一些标记有什么问题吗？如：

congue eget ipsum。 Cum sociis natoque <user:123;comment:123>penatibus et magnis</user:123;comment:123> dis parturient montes, nascetur ridiculus mus。

这样我可以解析文本，然后从数据库中提取 cmets 并以内联或气球或其他方式显示它们。

有没有更好的解决方案？

【问题讨论】：

标签： javascript comments

【解决方案1】：

首先，更改底层标记不会很好，因为如果内联 cmets 重叠会发生什么？

如果以这样一种方式编辑文本以使更改的单词包含内联注释，会发生什么情况？

如果没有更具体的规范，确实没有“完美”的方式来做到这一点。我建议按照您的建议将 cmets 存储为单词索引。如果文本被修改，运行旧版本和新版本之间的差异。使用此差异，您可以尝试更新内联 cmets 的索引并删除放置在已修改文本片段上的 cmets。

【讨论】：

【解决方案2】：

我会使用 javascript 来检索选定的文本，然后计算它的位置，计算从开始到选定文本的字符。所以在数据库中我会存储评论、“开始”位置和选择的“长度”。此解决方案的问题是您无法更改原始文本，因为如果这样做，则必须更新所有 cmets 的位置（其中一些可能需要删除）

这是最简单的部分。由于@tskuzzy（重叠的cmets）列出的所有问题，困难的部分是显示cmets

这是我做的一个小实验：

http://jsfiddle.net/5jNg9/1/

<div id="content">
congue eget ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>
<input type="button" onclick="checkSelection()" value="Get Selection"/>

<script>
function checkSelection(){
    var text = document.getElementById('content').innerHTML;
    var selection = document.getSelection();
    if(selection == ""){
        alert("cmon' at least select something first!");
    } else{
        var start = text.search(selection);
        alert("selection starts at character: "+ start +
              "\n and ends at character: "+(selection.length + start - 1) + "\n" +
              "the selected text is: '"+selection+"'");
    }
}
</script>

【讨论】：