Medium的note评论方式感觉很好，技术实现难度大么？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 4500 天前的主题，其中的信息可能已经有所发展或是发生改变。

不熟悉前端，如果要实现，需要再JS上下不少功夫吧？

Note

medium

4 条回复 1970-01-01 08:00:00 +08:00

otakustay

2013-06-26 17:12:21 +08:00

如果你说的确实是medium.com的话

右侧是以<p>和<figure>元素为粒度的毫无难度

文字选中后的comment稍微复杂点：

1. 找个selection相关的库
2. 能定位选中文本的位置
3. 往上面放个图标

总结一下，没啥难度……

buxiangshuo

2013-06-28 18:01:35 +08:00

@otakustay 感谢回答

我使用的是这个库 http://jquerypp.com/#range

得到选中文本位置和内容后，如果使用bootstrap的popover

用哪种方式在原文选中文本位置包裹<span>标签呢？

用wrap，replace，或者其他什么好的方案？

非常感谢！

otakustay

2013-06-28 18:24:15 +08:00

@buxiangshuo 没用过这库，不过初看了一下文档，似乎拿到range后，用range.rect('page')能拿到这个range在的位置（top和left）

然后的一个问题就是，bootstrap必须有个element让他放，虽然我们有了top和left，但硬是没办法给bootstrap一个目标元素……一般来说这种时候我会直接自己写个popover这没啥难度，如果你一定要用bootstrap，那么可以在range的位置（top和left）创建一个position: absolute的，0x0的，visibility: hidden的元素在那给popover用- -

buxiangshuo

2013-06-28 19:02:44 +08:00

@otakustay

我试了一下replace，获取到range后用range.toString()得到文本，然后对文本替换成加入tag的样子

$("div:contains('" + ranger + "')").each(function() {
var Text = $(this).html().replace(ranger, "<span id='item' rel='popover' data-cOntent='text' data-placement='top'>" + ranger + "</span>");
$(this).html(Text);
});

最后再在popover退掉后再恢复文本，最外面放一个for

办法很笨拙，肯定有更好的方法，初学JS，还有很多地方要学习啊…………