允许用户发布内联注释

时间:2011-07-29 12:19:57

标签: javascript comments

允许用户在网页上的文本块中发布内联注释的有效方法是什么?

例如,如果有一篇文章如:

  

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

我希望访问该网页的访问者能够对某些文字发表评论,他们可以选择几个单词并开始输入内联评论。有一个单词的索引,所以每个单词都有一个数字将无法工作,因为文本可以编辑,然后单词数字将不准确。

更改存储的文本并为每条评论添加一些标记是否有任何问题?如:

  

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

通过这种方式,我可以解析文本,然后从数据库中提取注释,并在内联或气球或其他任何内容中显示它们。

有没有更好的解决方案?

2 个答案:

答案 0 :(得分:2)

首先,更改基础标记不会很好,因为如果内联注释重叠会发生什么?

编辑文本时,如果更改的单词包含内联注释,会发生什么?

如果没有更具体的规格,实际上没有“完美”的方法。我建议将评论存储为您建议的单词索引。如果修改了文本,请在旧版本和新版本之间运行差异。使用此差异,您可以尝试更新内联注释的索引并删除放置在已修改的文本片段上的注释。

答案 1 :(得分:2)

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

这很容易。由于@tskuzzy列出的所有问题(重叠的评论)

,很难显示评论

这是我做过的一个小实验:

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>