V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
chunshan
V2EX  ›  分享创造

前端:简单的实现选中内容,划线、高亮小工具

  •  
  •   chunshan · 2022-11-27 20:24:23 +08:00 · 2498 次点击
    这是一个创建于 756 天前的主题,其中的信息可能已经有所发展或是发生改变。

    文章文本上,想要进行划线,高亮等操作,又不想破坏原有的 dom 结构,所以写了一个小工具来实现此想法。

    目前想到的应用场景:笔记、批注等。

    • 设置选中区域高亮 划线等标记
    • 标记区域添加点击事件 class
    • 标记区域显示与隐藏

    仓库地址: https://github.com/chunshand/mark-highlight

    第 1 条附言  ·  2022-12-09 09:54:16 +08:00
    最近考虑用 web component 实现,会不会更好一些
    6 条回复    2022-11-30 09:40:17 +08:00
    sugarkeek
        1
    sugarkeek  
       2022-11-27 20:48:10 +08:00
    支持,前几天刚刚下了一个支持标注的 chrome extension
    chunshan
        2
    chunshan  
    OP
       2022-11-27 21:45:56 +08:00
    🙏
    huajieyu
        3
    huajieyu  
       2022-11-28 14:18:33 +08:00
    chunshan
        4
    chunshan  
    OP
       2022-11-28 20:50:53 +08:00
    演示地址 : https://code.juejin.cn/pen/7171034100965310472

    方便更为直观的了解
    vsitebon
        5
    vsitebon  
       2022-11-29 16:03:13 +08:00
    用 svg 实现,太有趣了
    cooLepus
        6
    cooLepus  
       2022-11-30 09:40:17 +08:00
    原来是用 SVG 实现的, star 学习一下
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   912 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 22:28 · PVG 06:28 · LAX 14:28 · JFK 17:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.