Typora配置双击图片放大的功能(详细教程)

最新推荐文章于 2025-03-06 10:38:10 发布

si_unjuanable

最新推荐文章于 2025-03-06 10:38:10 发布

阅读量4.4k

点赞数 21

文章标签：编辑器 markdown github

本文链接：https://blog.csdn.net/weixin_43654989/article/details/123722779

版权

Typora默认是没有点击图片放大功能的，需要我们自己配置。

从Github下载LightBox

LightBox

拷贝dist的文件

将dist文件夹下的内容拷贝到Typora安装目录的对应路径下
在这里插入图片描述

修改window.html文件

window.html这个文件实际就是Typora的主界面！！
在这里插入图片描述

在这里插入图片描述

引入CSS文件

搜索</head>，放在其前面即可

<link rel="stylesheet" href="./extend/lightbox2/css/lightbox.min.css" crossorigin="anonymous">

在这里插入图片描述

引入JS文件

搜索<script src="./appsrc/window/frame.js" defer="defer"></script>，放在其后面即可

<script type="text/javascript" src="./extend/lightbox2/js/lightbox.js" defer="defer"></script>

在这里插入图片描述

修改 lightbox.js 文件

因为lightbox需要有 a 标签包围着 img 标签，相应的点击事件是绑定在 a 标签上的，且需要 href 、 data-lightbox 、 data-alt 等属性，而Typora中的图片只有 img 标签，父级没有 a 标签，也没有相应要求的属性。因此需要改造一下 lightbox.js 文件。
在这里插入图片描述

为img标签绑定双击事件(修改函数)

搜索Lightbox.prototype.enable，在其后添加代码

//为img绑定双击事件，但要排除本就是双击放大展示的图片
   $('body').on('dblclick', "img:not([class='lb-image'])" ,function(event){
       self.start($(event.currentTarget)) ;
       return false;
    }) ;

在这里插入图片描述

lightbox用到三个属性：alt、href、title，这三个属性在img标签中均有对应的。
修改start函数，换成img对应属性：

搜索Lightbox.prototype.start,添加以下代码

function addToAlbum($link) {
      self.album.push({
        alt: $link.attr('data-alt')|| $link.attr('alt'),
        link: $link.attr('href')|| $link.attr('src'),
        title: $link.attr('data-title') || $link.attr('title')
      });
    }

在这里插入图片描述

注释data-lightbox

还有另外一个属性data-lightbox，img没有该属性，因此这里不使用，lightbox中有一段判断是否有该属性的代码，修改不存在该属性时的逻辑代码（注释掉原有的，添加addToAlbum($link);）：
搜索addToAlbum($link);
在这里插入图片描述
修改完毕，保存即可。