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

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

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

    腾讯云最新优惠活动来了:云产品限时1折,云服务器低至88元/年 ,点击这里立即抢购:9i0i.cn/qcloud,更有2860元代金券免费领取,付款直接抵现金用,点击这里立即领取:9i0i.cn/qcloudquan

    (福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

    文章文本上,想要进行划线,高亮等操作,又不想破坏原有的 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   ·   实用小工具   ·   5495 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 07:42 · PVG 15:42 · LAX 00:42 · JFK 03:42
    Developed with CodeLauncher
    ? Do have faith in what you're doing.


    http://www.vxiaotou.com