请教一下网页批注功能应该如何实现？
站长
· 阅读数 14
world有一个批注的功能。类似下面这个样子：
我想问一下，网页实现像这种功能有什么思路进行实现？
- 其中被批注的文字与批注的内容直接的虚线是如何生成的？
- 被批注的文字，我改如何标识该文字选中的范围？ 比如被批注的：“666”,我如何标识选中的文字有多少个，然后保存到数据库？
- 如果选中的内容一样，我该如何在数据库保存，才能区别它们？
上面三个问题，我都不清楚，请能力水平高者不吝赐教
有什么现成的网站案例吗？我想看看他实现的效果？
回复
1个回答
test
2024-07-17
纯DOM和CSS实现感觉不太好，在线版word基本都是canvas画的。包括google文档、腾讯文档等。一是DOM性能不行，而是DOM绘制一些奇奇怪怪的图形天生劣势。
非要用DOM和CSS的话，说下我的想法：1.虚线直接通过伪元素，比如::after来实现，作用在你框选的这个文字块上。然后设置伪元素的样式。2.标识选中文字，用window.getSelection().toString()获取选中的内容。3.选中的内容一样，需要增加其他不同的标识，比如行、列、id等来形成唯一标识。
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引，对解决问题有帮助
- 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容