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

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

  •  
  •   chunshan · 64 天前 · 1575 次点击
    这是一个创建于 64 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

    方便更为直观的了解
    vsitebon
        5
    vsitebon  
       62 天前
    用 svg 实现,太有趣了
    cooLepus
        6
    cooLepus  
       62 天前
    原来是用 SVG 实现的, star 学习一下
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   实用小工具   ·   2943 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 39ms · UTC 03:56 · PVG 11:56 · LAX 19:56 · JFK 22:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.