[js] 编辑器自定义光标(支持顺滑光标 / 是否闪烁 / 自定义样式等)

本贴最后更新于 221 天前,其中的信息可能已经时移世异

缘起

看到论坛有小伙伴有这样的需求,让 deepseek 写了个。

然后完善了下功能和做了些兼容性。

功能简介

1 支持顺滑光标,可设置是否开启

2 支持是否闪烁光标,可设置是否开启

3 支持自定义光标其他样式,比如高宽,颜色等

4 目前仅支持在编辑器中使用

效果演示

录屏很难录出真实效果,会掉帧,仅供参考

自定义光标样式

参考 [js] 编辑器自定义光标(支持顺滑光标 / 是否闪烁 / 自定义样式等) - wilsons 的回帖

关联帖子

光标停止闪烁

免责声明

虽然光标一般不会引起什么后果,但还是请测试无误后使用,使用前做好备份工作。由此引起的任何后果自负,均与作者与本代码无关。

感谢作者

image.png

代码

👇 打赏后可见(为什么要打赏后可见?主要想通过这种方式统计使用人数及用户需求,以帮助作者分析哪些功能是用户最需要的)

打赏 20 积分后可见
20 积分 • 15 打赏
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    28443 引用 • 119762 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    285 引用 • 1984 回帖
3 操作
wilsons 在 2025-06-05 05:52:09 更新了该帖
wilsons 在 2025-05-16 21:21:36 更新了该帖
wilsons 在 2025-05-16 21:02:28 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • Mayrain

    用的 callout 确实是插件,不过我刚才试了试,公式上光标位置错误这个应该是可以在原生思源(不安装插件和主题)上稳定复现的。感觉 Callout 的光标错位问题和这个是一码事:

    1. 打出一个公式(行级公式),以公式结尾。

    2. 回车,跳到下一行。到目前为止都没问题。

      image.png

    3. 这时候按 backspace,会发现光标显示在一个很奇怪的位置(但是如果输入东西的话就会发现光标的真实位置确实是在公式后面)

      image.png

      image.png

    1 回复
  • 其他回帖
  • wilsons 1 2 评论

    0.0.10 已修复

    @Mayrain 用新版本试试。

    @participants 0.0.10 有重大更新和较大的性能提升

    0.0.10 更新内容:

    1. 重构光标获取算法(通过系统 api+marker 双重方案保证性能和兼容性);
    2. 修复光标在行内公式等特殊情况时定位不准的问题;
    3. 改进光标获取性能;
    4. 改进标签切换等可能出现意外光标情况;
    5. 修改多层滚动条嵌套下的滚动延迟问题(0.0.9.2);
    2 操作
    wilsons 在 2025-05-20 08:37:15 更新了该回帖
    wilsons 在 2025-05-20 08:35:17 更新了该回帖
    我移动端的光标残留也不出现了
    5kyfkr
    @5kyfkr 嗯,可能就是意外光标情况,之前 pc 也有这个问题,只不过没发现
    wilsons
  • wilsons 1 1 评论

    @participants

    0.0.5 带来重大更新,建议升级

    1 改进了在光标闪烁时,当移动/输入/点击时的不自然感,解决了会有光标突然消失感的问题;

    2 改进了滚动时光标会有闪烁的问题;

    3 取消了选择文本时的顺滑效果,以解决选择文本时跳动感过强,体验不好的问题

    另外,评论区增加更多光标样式,可通过修改 svg 填充颜色,自定义自己喜欢的风格哦

    [js] 编辑器自定义光标(支持顺滑光标 / 是否闪烁 / 自定义样式等) - wilsons 的回帖

    太好了,光标闪烁的也修复了
    5kyfkr
  • wilsons 1 赞同 1 评论

    你这什么插件? 不是思源自带的功能。

    插件名发出来我试试。

    插件之间也有可能冲突啥的。

    一般不会对插件兼容,因为插件太多了,无法把所有插件兼容一遍,一般发现一例改一例。

    建议:

    1. 先用最新代码试试
    2. 新空间排除干扰试试
    3. 如果仍有问题,把插件名,思源版本,重新步骤,有问题的文档发来看看。
    1 回复
    1 操作
    wilsons 在 2025-05-17 23:50:39 更新了该回帖
    插件是从这里来的: [css] 在思源中制作 callout
    Mayrain
  • 查看全部回帖
wilsons
正式入驻知乎了,以后新贴主要在这里。 欢迎大家订阅关注! 你的关注对我是莫大鼓励,也能让我持续产出优质内容,我们一起成长 🙏 点这里立即关注:https://www.zhihu.com/people/wilsonses