# pyhtmlPreviewer

**Repository Path**: mightyang/pyhtmlPreviewer

## Basic Information

- **Project Name**: pyhtmlPreviewer
- **Description**: pyhtmlPreviewer 是针对 Vim 开发的 html 实时预览插件，采用 viml, python3, PySide2 编写
- **Primary Language**: VimL
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 14
- **Forks**: 1
- **Created**: 2019-12-18
- **Last Updated**: 2022-02-23

## Categories & Tags

**Categories**: text-editor

**Tags**: None

## README

# pyhtmlPreviewer

![输入图片说明](https://images.gitee.com/uploads/images/2019/1219/021659_fe0599f0_5444868.gif "pyhtmlPreviewer.gif")

#### 介绍
pyhtmlPreviewer 是针对 Vim 写的 html 实时预览插件。

#### 要求
1. python3
2. PySide2 >= 5.14（因为 5.14 里的 QWebEnginePage 里新加入了一个 NavigationTypeRedirect 选项，用于控制页面自动跳转）
3. gvim（vim 会因为 pyside2 不是主线程运行而报错）

#### 编写原因
最近在翻译一个 html 文档，尝试了各种 Vim 插件，大部分都要安装 nodejs 才能与浏览器实时
预览，但是感觉没一个成功的（最近脸黑），而我只会 python，所以只好用 PySide2 的 QtWebEngineWidgets 模块弄了个浏览器的界面来实时预览。

#### 原理

##### 启动
在 VIM 的插件脚本里，采用多线程启动 app.exec_，由于 PySide2 本身速度不快，所以启动会比较慢。
##### 网页与 python 的通讯
通过 PySide2 中的 qwebchannel.js 来实现网页与 VIM 之间的通讯。
##### 同步定位
通过 python 的 HTMLParser 库解析 html 信息，给相关的 tag 添加了自定义属性：pyhtmlpos，值 "x,y"（x，y是源码中的位置，可以通过 HTMLParser 的 getpos 函数来获取），最后每次点击时，通过 qwebchanne.js 传递给 python，实现 VIM 的光标跳转。只能针对静态网页，动态无法实现。其中 HTMLParser 解析过程不快，所以将刷新由原先的实时改成保存时刷新。


#### 安装教程

1.  安装 python3.x(去官网下)
2.  安装 PySide2.(pip install PySide2)
3.  vim-plug 插件安装：Plug 'https://gitee.com/mightyang/pyhtmlPreviewer.git'

#### 使用说明

1.  默认 html 文件打开会自动打开浏览器；
1.  在上面的工具栏里加入编辑功能，开启后，网页跳转关闭，同步点击的 tag 位置与 VIM 中光标的位置，目前问题比如动态网页无法定位。

#### 可控参数与命令：

##### 参数

自动打开开关，默认开启

let g:pyhtmlPreviewerAutoOpen=1

文件格式绑定，如 '\*.html,\*.py,\*.js'， 默认'\*.html'

let g:pyhtmlPreviewerFileType='\*.html'

同步定位是否定位到 text 上，默认开启，否则定位到 tag 上，目前部分标签无法确定，比如<span>。

let g:pyHtmlPreviewerPosAtText=1

##### 命令

窗口开光命令

PyHtmlPreviewToggle()

可以通过如下命令绑定快捷键：

map \<F10\> :call PyHtmlPreviewerToggle()\<CR\>