Typora结合Layer放大查看图片

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. 图片工具栏，可以进行图片旋转；

效果图

插件源码下载地址