Typora结合Layer放大查看图片

发布时间 2024-01-11 15:35:27作者: Jeffcode

Typora结合Layer放大查看图片

下载最新Layui组件库

Layui官网

Layui2.9.3下载

拷贝文件

将layui目录拷贝到Typora的安装目录下。

安装目录的resources\app文件夹下,新建了extend文件夹,用来存放扩展插件的。

修改window.html文件

位置:Typora安装目录\resources\app\window.html(这个文件实际就是Typora的主界面)

引入 css 文件

在内添加下面代码

<link rel="stylesheet" href="extend/layui/css/layui.css" crossorigin="anonymous">

引入 js 文件

可以搜索<script src="./app/window/frame.js" defer="defer"></script>,然后在它的后面添加:

<script src="./extend/layui/layui.js"></script>
<script src="./extend/layui/img.init.js"></script>

修改完成,保存。

启动Typora,验证

Ctrl + 鼠标单击,要放大查看的图片。

使用功能点:

  1. Ctrl + 鼠标单击,弹出图片层查看;
  2. 鼠标滚轮,放大缩小图片;
  3. 鼠标右击图片层,关闭上下工具栏,再次右击显示工具栏;
  4. 鼠标点击按住图片,可以进行拖动;
  5. 左右两边有图标,可以切换到上下张图片;
  6. 图片工具栏,可以进行图片旋转;

效果图

image

插件源码下载地址