Skip to content

Commit acc90e3

Browse files
KuingsmileKuingsmile
committed
📝 Docs(custom): update docs
1 parent e4bc5cd commit acc90e3

File tree

3 files changed

+137
-81
lines changed

3 files changed

+137
-81
lines changed

‎README.md‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@
99

1010
## Overview
1111

12-
`vs-piclist` is a feature-rich VSCode extension designed for seamless image management. This extension enables you to easily upload images to a remote hosting service and automatically insert the generated URL into your currently active file. What sets `vs-piclist` apart from other solutions is its robust set of features, including image compression, watermarking, and other advanced image processing capabilities.
12+
`vs-piclist` is a feature-rich VSCode extension designed for seamless image management. This extension enables you to easily upload images to a remote hosting service and automatically insert the generated URL into your currently active file.
13+
14+
What sets `vs-piclist` apart from other solutions is its robust set of features, including image compression, watermarking, and other advanced image processing capabilities.
1315

1416
### Prerequisites
1517

@@ -23,6 +25,8 @@ While similar extensions like [vs-picgo](https://github.com/PicGo/vs-picgo) exis
2325

2426
- **Effortless Uploads**: With just a few clicks, upload images to your preferred remote image hosting service.
2527
- **Upload on Drag-and-Drop**: Drag-and-drop images from your file explorer directly into your working file.
28+
- **Upload All**: Upload all images in a file.
29+
- **Upload Selected**: Right-click to upload selected images.
2630
- **Auto-Insert URLs**: The extension takes care of inserting the image URL directly into your working file.
2731
- **Image Management**: Easily delete images stored in your remote hosting service directly through PicList in VSCode.
2832
- **Advanced Image Processing**: Includes support for image compression, watermarking, and other post-upload manipulations.
@@ -55,6 +59,16 @@ While similar extensions like [vs-picgo](https://github.com/PicGo/vs-picgo) exis
5559
<img src="https://s2.loli.net/2023/09/01/8oYzJinhgajLfdI.gif" alt="input box.gif">
5660
</details>
5761

62+
<details>
63+
<summary>Upload all images in a file</summary>
64+
<img src="https://s2.loli.net/2024/06/16/9JDyICxZ3mUEBio.gif" alt="input box.gif">
65+
</details>
66+
67+
<details>
68+
<summary>Upload selected images in a file by right click</summary>
69+
<img src="https://s2.loli.net/2024/06/16/GUVjraIWTuX2wgn.gif" alt="input box.gif">
70+
</details>
71+
5872
## Settings
5973

6074
![setting](https://s2.loli.net/2023/08/31/vL7WgcDrxIGzZBR.webp)
@@ -102,3 +116,4 @@ When you deploy Piclist or Piclist-Core service on a server or other machine, yo
102116
## Dependencies
103117

104118
- [PicList](https://github.com/Kuingsmile/PicList)
119+
- [PicList-Core](https://github.com/Kuingsmile/piclist-core)

‎README_cn.md‎

Lines changed: 119 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,119 @@
1-
# vs-piclist
2-
3-
## 概览
4-
5-
`vs-piclist`是一个功能丰富的VSCode扩展，搭配PicList使用，可以轻松地将图像上传到各种图床，并自动将生成的URL插入到当前活动文件中。
6-
7-
`vs-piclist`通过和PicList配合使用，可以实现包括图像压缩，水印和其他高级图像处理功能。
8-
9-
### 先决条件
10-
11-
在使用`vs-piclist`之前，你必须先安装桌面软件[PicList](https://github.com/Kuingsmile/PicList)。
12-
13-
### 功能对比
14-
15-
尽管存在类似的扩展，如[vs-picgo](https://github.com/PicGo/vs-picgo)，其依赖于[PicGo-Core](https://github.com/PicGo/PicGo-Core)，但`vs-piclist`提供了更强大的功能，支持从图像处理、上传到云删除的一整套功能。
16-
17-
## 功能
18-
19-
- **轻松上传**：只需点击几下，即可将图像上传到您喜欢的远程图像托管服务。
20-
- **自动插入URL**：扩展会自动将图像URL插入到您的工作文件中。
21-
- **图像管理**：通过VSCode中的PicList轻松删除存储在远程托管服务中的图像。
22-
- **高级图像处理**：包括对图像压缩、水印和其他上传后处理的支持。
23-
- **远程服务器模式**：支持使用在服务器或远程机器上运行的PicList以及piclist-core服务。
24-
25-
### Gif 演示
26-
27-
<img src="https://s2.loli.net/2023/08/31/XvZrtgiuWwLYIHy.gif" alt="clipboard.gif">
28-
<img src="https://s2.loli.net/2023/08/31/npvwQoT4Ucr5mPN.gif" alt="explorer.gif">
29-
<img src="https://s2.loli.net/2023/08/31/tAW54rVFhO2KSTo.gif" alt="input box.gif">
30-
<img src="https://s2.loli.net/2023/09/01/8oYzJinhgajLfdI.gif" alt="input box.gif">
31-
32-
## 设置
33-
34-
![setting](https://s2.loli.net/2023/08/31/vL7WgcDrxIGzZBR.webp)
35-
36-
### 上传API接口地址
37-
38-
这是PicList的上传api接口地址，默认为`http://127.0.0.1:36677/upload`，参考说明文档[PicList Server](https://piclist.cn/en/advanced.html#use-of-built-in-server)。
39-
40-
### 删除API接口地址
41-
42-
这是PicList的删除api接口地址，默认为`http://127.0.0.1:36677/delete`，参考说明文档[PicList Server](https://piclist.cn/en/advanced.html#use-of-built-in-server)。
43-
44-
### 粘贴格式
45-
46-
默认为markdown格式。
47-
48-
| 类型 | 格式 |
49-
| -------- | ----------------------- |
50-
| url | `url` |
51-
| markdown | `![alt](url)` |
52-
| html | `<img src=url alt=alt>` |
53-
| ubb | `[img]url[/img]` |
54-
| custom | `custom` |
55-
56-
### 自定义格式
57-
58-
默认为`![$filename]($url)`.
59-
60-
### URL编码
61-
62-
是否需要在插入时编码URL。
63-
64-
### 拖拽上传
65-
66-
是否开启拖拽上传。
67-
68-
### 远程服务器模式
69-
70-
当您在服务器或其它机器上部署了Piclist或Piclist-Core服务时，可开启远程服务器模式，此时将会通过发送文件的方式发起上传请求。
71-
72-
## 作者
73-
74-
- [Kuingsmile](https://github.com/Kuingsmile)
75-
76-
## 依赖
77-
78-
- [PicList](https://github.com/Kuingsmile/PicList)
79-
- [PicList-Core](https://github.com/Kuingsmile/piclist-core)
1+
# vs-piclist
2+
3+
> VSCode 插件版本的 [PicList](https://github.com/Kuingsmile/PicList).
4+
5+
[![version](https://img.shields.io/vscode-marketplace/v/Kuingsmile.vs-piclist.svg?style=flat-square&label=vscode%20marketplace)](https://marketplace.visualstudio.com/items?itemName=Kuingsmile.vs-piclist)
6+
![Visual Studio Marketplace Rating](https://img.shields.io/visual-studio-marketplace/r/Kuingsmile.vs-piclist?style=flat-square)
7+
[![installs](https://img.shields.io/vscode-marketplace/d/Kuingsmile.vs-piclist.svg?style=flat-square)](https://marketplace.visualstudio.com/items?itemName=Kuingsmile.vs-piclist)
8+
[![GitHub stars](https://img.shields.io/github/stars/Kuingsmile/vs-piclist.svg?style=flat-square&label=github%20stars)](https://github.com/Kuingsmile/vs-piclist)
9+
10+
## 概览
11+
12+
`vs-piclist`是一个功能丰富的VSCode扩展，搭配PicList使用，可以轻松地将图像上传到各种图床，并自动将生成的URL插入到当前活动文件中。
13+
14+
`vs-piclist`通过和PicList配合使用，可以实现包括图像压缩，水印和其他高级图像处理功能。
15+
16+
### 先决条件
17+
18+
在使用`vs-piclist`之前，你必须先安装桌面软件[PicList](https://github.com/Kuingsmile/PicList)，或者[PicList-Core](https://github.com/Kuingsmile/piclist-core)。
19+
20+
### 功能对比
21+
22+
尽管存在类似的扩展，如[vs-picgo](https://github.com/PicGo/vs-picgo)，其依赖于[PicGo-Core](https://github.com/PicGo/PicGo-Core)，但`vs-piclist`提供了更强大的功能，支持从图像处理、上传到云删除的一整套功能。
23+
24+
## 功能
25+
26+
- **轻松上传**：只需点击几下，即可将图像上传到您喜欢的远程图像托管服务。
27+
- **拖拽上传**：直接从文件资源管理器中将图像拖放到您的工作文件中。
28+
- **全部上传**：上传文件中所有的图片。
29+
- **右键上传**：右键点击上传选中的图片。
30+
- **自动插入URL**：扩展会自动将图像URL插入到您的工作文件中。
31+
- **图像管理**：通过VSCode中的PicList轻松删除存储在远程托管服务中的图像。
32+
- **高级图像处理**：包括对图像压缩、水印和其他上传后处理的支持。
33+
- **远程服务器模式**：支持使用在服务器或远程机器上运行的PicList以及piclist-core服务。
34+
35+
### Gif 演示
36+
37+
<details>
38+
<summary>从剪贴板上传图片</summary>
39+
<img src="https://s2.loli.net/2023/08/31/XvZrtgiuWwLYIHy.gif" alt="clipboard.gif">
40+
</details>
41+
42+
<details>
43+
<summary>从浏览器上传图片</summary>
44+
<img src="https://s2.loli.net/2023/08/31/npvwQoT4Ucr5mPN.gif" alt="explorer.gif">
45+
</details>
46+
47+
<details>
48+
<summary>从URL上传图片</summary>
49+
<img src="https://s2.loli.net/2023/08/31/tAW54rVFhO2KSTo.gif" alt="input box.gif">
50+
</details>
51+
52+
<details>
53+
<summary>通过拖拽上传图片</summary>
54+
<img src="https://s2.loli.net/2023/09/01/rflXoJLsR5heDqK.gif" alt="input box.gif">
55+
</details>
56+
57+
<details>
58+
<summary>云端删除图片</summary>
59+
<img src="https://s2.loli.net/2023/09/01/8oYzJinhgajLfdI.gif" alt="input box.gif">
60+
</details>
61+
62+
<details>
63+
<summary>上传文件中所有图片</summary>
64+
<img src="https://s2.loli.net/2024/06/16/9JDyICxZ3mUEBio.gif" alt="input box.gif">
65+
</details>
66+
67+
<details>
68+
<summary>右键点击上传选中的图片</summary>
69+
<img src="https://s2.loli.net/2024/06/16/GUVjraIWTuX2wgn.gif" alt="input box.gif">
70+
</details>
71+
72+
## 设置
73+
74+
![setting](https://s2.loli.net/2023/08/31/vL7WgcDrxIGzZBR.webp)
75+
76+
### 上传API接口地址
77+
78+
这是PicList的上传api接口地址，默认为`http://127.0.0.1:36677/upload`，参考说明文档[PicList Server](https://piclist.cn/en/advanced.html#use-of-built-in-server)。
79+
80+
### 删除API接口地址
81+
82+
这是PicList的删除api接口地址，默认为`http://127.0.0.1:36677/delete`，参考说明文档[PicList Server](https://piclist.cn/en/advanced.html#use-of-built-in-server)。
83+
84+
### 粘贴格式
85+
86+
默认为markdown格式。
87+
88+
| 类型 | 格式 |
89+
| -------- | ----------------------- |
90+
| url | `url` |
91+
| markdown | `![alt](url)` |
92+
| html | `<img src=url alt=alt>` |
93+
| ubb | `[img]url[/img]` |
94+
| custom | `custom` |
95+
96+
### 自定义格式
97+
98+
默认为`![$filename]($url)`.
99+
100+
### URL编码
101+
102+
是否需要在插入时编码URL。
103+
104+
### 拖拽上传
105+
106+
是否开启拖拽上传。
107+
108+
### 远程服务器模式
109+
110+
当您在服务器或其它机器上部署了Piclist或Piclist-Core服务时，可开启远程服务器模式，此时将会通过发送文件的方式发起上传请求。
111+
112+
## 作者
113+
114+
- [Kuingsmile](https://github.com/Kuingsmile)
115+
116+
## 依赖
117+
118+
- [PicList](https://github.com/Kuingsmile/PicList)
119+
- [PicList-Core](https://github.com/Kuingsmile/piclist-core)

‎src/vscode/commands.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ export class Commands {
122122
}
123123
text = document.getText(editor.selection)
124124
}
125+
const textLength = text.length
125126
const regex = /(!\[.*?\]\((.*?)\))|(<img[^>]*src="(.*?)"[^>]*>)|(https?:\/\/[^\s]+)|(\[img\](.*?)\[\/img\])/g
126127
let match
127128
const uploadedImages: { [key: string]: string } = {}
@@ -157,7 +158,7 @@ export class Commands {
157158
const range =
158159
selected && !editor.selection.isEmpty
159160
? editor.selection
160-
: new vscode.Range(document.positionAt(0), document.positionAt(text.length))
161+
: new vscode.Range(document.positionAt(0), document.positionAt(textLength))
161162
editor.edit(editBuilder => {
162163
editBuilder.replace(range, text)
163164
})

0 commit comments

Comments
 (0)