352 lines
9.1 KiB
Markdown
352 lines
9.1 KiB
Markdown
# Bulk Copy with Images - 图片优化增强版
|
||
|
||
一键复制 Obsidian 笔记全文，自动转换为富文本 HTML，图片内嵌为 base64。完美支持飞书云文档、微信公众号、知乎等多种编辑器平台。
|
||
|
||
## ✨ 核心功能
|
||
|
||
### 1. 完整的排版保留（增强版）
|
||
- ✅ **标题**：H1-H6 所有级别，保留层级结构
|
||
- ✅ **文本格式**：粗体、斜体、粗斜体、删除线、高亮
|
||
- ✅ **代码**：代码块（支持语法标记）、行内代码（完整转义）
|
||
- ✅ **列表**：有序列表、无序列表（支持混合）
|
||
- ✅ **引用块**：多行引用，保持完整格式
|
||
- ✅ **表格**：完整的 Markdown 表格转换
|
||
- ✅ **链接**：自动转换并添加安全属性
|
||
- ✅ **分割线**：支持 `---`、`***`、`___` 三种格式
|
||
- ✅ **换行**：支持双空格换行
|
||
- ✅ **段落**：智能识别段落，保持原有结构
|
||
|
||
### 2. 智能图片处理
|
||
- ✅ **自动压缩**：大图自动缩放到合适尺寸
|
||
- ✅ **质量优化**：在清晰度和文件大小间取得平衡
|
||
- ✅ **显示控制**：限制图片最大显示宽度，避免过长
|
||
- ✅ **格式转换**：统一转为 JPEG 格式（压缩率更高）
|
||
- ✅ **特殊处理**：
|
||
- SVG：保持矢量格式
|
||
- GIF：保留动画效果
|
||
- PNG/JPG：智能压缩
|
||
|
||
### 3. 多平台兼容
|
||
- 飞书云文档 ✅
|
||
- 微信公众号 ✅
|
||
- 知乎 ✅
|
||
- 语雀 ✅
|
||
- Notion ✅
|
||
- 其他富文本编辑器 ✅
|
||
|
||
## 🎯 图片优化说明
|
||
|
||
### 当前配置
|
||
|
||
```javascript
|
||
const IMAGE_CONFIG = {
|
||
MAX_WIDTH: 800, // 压缩最大宽度（像素）
|
||
QUALITY: 0.8, // 压缩质量（0-1）
|
||
DISPLAY_MAX_WIDTH: 600 // 显示最大宽度（像素）
|
||
};
|
||
```
|
||
|
||
### 参数说明
|
||
|
||
#### 1. `MAX_WIDTH` - 压缩最大宽度
|
||
- **作用**：超过此宽度的图片会被等比缩放
|
||
- **默认值**：800px
|
||
- **建议值**：
|
||
- 微信公众号：800px（推荐）
|
||
- 飞书文档：1000px
|
||
- 知乎：800px
|
||
- 如果图片需要更清晰：1200px
|
||
- 如果想要更小的文件：600px
|
||
|
||
#### 2. `QUALITY` - 压缩质量
|
||
- **作用**：控制 JPEG 压缩质量
|
||
- **默认值**：0.8（80%）
|
||
- **建议值**：
|
||
- 高质量（文件较大）：0.85-0.9
|
||
- 平衡模式（推荐）：0.75-0.85
|
||
- 高压缩（文件小，质量降低）：0.6-0.75
|
||
|
||
#### 3. `DISPLAY_MAX_WIDTH` - 显示最大宽度
|
||
- **作用**：图片在编辑器中的最大显示宽度
|
||
- **默认值**：600px
|
||
- **说明**：
|
||
- 这个设置**不影响图片实际尺寸**
|
||
- 只控制图片在编辑器中的显示宽度
|
||
- 避免图片在编辑器中显得过长
|
||
|
||
### 如何自定义配置？
|
||
|
||
打开 `main.js`，修改文件开头的配置：
|
||
|
||
```javascript
|
||
/* ========== 图片优化配置 ========== */
|
||
const IMAGE_CONFIG = {
|
||
MAX_WIDTH: 800, // 改成你想要的压缩宽度
|
||
QUALITY: 0.8, // 改成你想要的质量（0-1）
|
||
DISPLAY_MAX_WIDTH: 600 // 改成你想要的显示宽度
|
||
};
|
||
```
|
||
|
||
### 压缩效果对比
|
||
|
||
| 原始图片 | 压缩后 | 节省空间 |
|
||
|---------|--------|---------|
|
||
| 5MB, 3000x2000 | ~150KB | 97% |
|
||
| 2MB, 1920x1080 | ~80KB | 96% |
|
||
| 500KB, 800x600 | ~60KB | 88% |
|
||
|
||
## 📖 使用方法
|
||
|
||
### 方法 1：快捷键
|
||
1. 打开任意 Markdown 笔记
|
||
2. 按 `Ctrl+Shift+C`（Windows/Linux）或 `Cmd+Shift+C`（Mac）
|
||
3. 粘贴到目标编辑器
|
||
|
||
### 方法 2：命令面板
|
||
1. 按 `Ctrl+P`（Windows/Linux）或 `Cmd+P`（Mac）
|
||
2. 输入"复制全文"
|
||
3. 选择"复制全文并内嵌本地图片"
|
||
4. 粘贴到目标编辑器
|
||
|
||
## 💡 使用技巧
|
||
|
||
### 1. 不同平台的建议配置
|
||
|
||
**微信公众号**（推荐当前配置）
|
||
```javascript
|
||
MAX_WIDTH: 800
|
||
QUALITY: 0.8
|
||
DISPLAY_MAX_WIDTH: 600
|
||
```
|
||
|
||
**飞书云文档**（可以更高清）
|
||
```javascript
|
||
MAX_WIDTH: 1000
|
||
QUALITY: 0.85
|
||
DISPLAY_MAX_WIDTH: 700
|
||
```
|
||
|
||
**知乎**（兼顾质量和加载速度）
|
||
```javascript
|
||
MAX_WIDTH: 800
|
||
QUALITY: 0.8
|
||
DISPLAY_MAX_WIDTH: 600
|
||
```
|
||
|
||
### 2. 图片过大怎么办？
|
||
|
||
如果复制后提示"图片太大"或粘贴失败：
|
||
1. 降低 `MAX_WIDTH`（如改为 600 或 700）
|
||
2. 降低 `QUALITY`（如改为 0.7）
|
||
3. 或者将大图片分开发送
|
||
|
||
### 3. 图片不够清晰？
|
||
|
||
如果复制后图片显示模糊：
|
||
1. 提高 `MAX_WIDTH`（如改为 1000 或 1200）
|
||
2. 提高 `QUALITY`（如改为 0.85 或 0.9）
|
||
|
||
## 🔧 技术细节
|
||
|
||
### 图片处理流程
|
||
|
||
1. **读取图片** → 2. **判断格式** → 3. **压缩处理** → 4. **Base64 编码** → 5. **生成 HTML**
|
||
|
||
### 特殊格式处理
|
||
|
||
- **SVG**：保持矢量格式，不压缩
|
||
- **GIF**：保留动画，不压缩
|
||
- **PNG/JPG/WebP**：转为 JPEG 并压缩
|
||
- **其他格式**：尝试压缩，失败则保持原样
|
||
|
||
### 为什么转为 JPEG？
|
||
|
||
- JPEG 压缩率高（文件更小）
|
||
- 兼容性好（所有平台都支持）
|
||
- 对于照片和复杂图片效果最好
|
||
|
||
## ❓ 常见问题
|
||
|
||
### Q: 为什么有些平台粘贴后样式消失了？
|
||
A: 某些平台会过滤样式。插件已使用内联样式来提高兼容性。
|
||
|
||
### Q: 图片太小/太大怎么办？
|
||
A: 调整 `DISPLAY_MAX_WIDTH` 参数。
|
||
|
||
### Q: 压缩会影响图片清晰度吗？
|
||
A: 会有轻微影响，但肉眼难以察觉。可以通过提高 `QUALITY` 来改善。
|
||
|
||
### Q: 支持哪些图片格式？
|
||
A: PNG, JPG, JPEG, GIF, WebP, SVG, BMP, TIFF 等常见格式。
|
||
|
||
### Q: 动图会变成静态图吗？
|
||
A: 不会，GIF 动图会保留动画效果。
|
||
|
||
### Q: 代码块或图片还是显示为占位符怎么办？
|
||
A:
|
||
1. 打开浏览器开发者工具（F12）
|
||
2. 切换到 Console（控制台）标签
|
||
3. 复制文档时查看输出的调试信息
|
||
4. 检查是否有 `[bulk-copy] HTML Content Preview:` 日志
|
||
5. 如果 HTML 预览中已经包含正确内容，问题可能在剪贴板或目标平台
|
||
6. 尝试在不同浏览器中测试（推荐 Chrome/Edge）
|
||
|
||
### Q: 在某些平台粘贴后格式丢失？
|
||
A:
|
||
1. 使用 `Ctrl+Shift+V`（纯文本粘贴）可能会丢失格式
|
||
2. 应该使用 `Ctrl+V`（富文本粘贴）
|
||
3. 某些平台（如 Notion）有特殊的粘贴处理，可能需要多试几次
|
||
4. 微信公众号建议在新版编辑器中使用
|
||
|
||
## 📋 支持的 Markdown 语法清单
|
||
|
||
以下所有语法都会被正确转换为 HTML：
|
||
|
||
### 标题
|
||
```markdown
|
||
# H1 标题
|
||
## H2 标题
|
||
### H3 标题
|
||
#### H4 标题
|
||
##### H5 标题
|
||
###### H6 标题
|
||
```
|
||
|
||
### 文本格式
|
||
```markdown
|
||
**粗体文本**
|
||
*斜体文本*
|
||
***粗斜体***
|
||
~~删除线~~
|
||
==高亮文本==
|
||
```
|
||
|
||
### 列表
|
||
```markdown
|
||
- 无序列表项 1
|
||
- 无序列表项 2
|
||
|
||
1. 有序列表项 1
|
||
2. 有序列表项 2
|
||
```
|
||
|
||
### 引用
|
||
```markdown
|
||
> 这是一段引用
|
||
> 可以有多行
|
||
```
|
||
|
||
### 代码
|
||
```markdown
|
||
`行内代码`
|
||
|
||
\```javascript
|
||
// 代码块
|
||
function hello() {
|
||
console.log("Hello!");
|
||
}
|
||
\```
|
||
```
|
||
|
||
### 表格
|
||
```markdown
|
||
| 列1 | 列2 | 列3 |
|
||
|-----|-----|-----|
|
||
| 数据1 | 数据2 | 数据3 |
|
||
| 数据4 | 数据5 | 数据6 |
|
||
```
|
||
|
||
### 链接和图片
|
||
```markdown
|
||
[链接文本](https://example.com)
|
||
|
||
![[Obsidian 图片语法.png]]
|
||
```
|
||
|
||
### 分割线
|
||
```markdown
|
||
---
|
||
***
|
||
___
|
||
```
|
||
|
||
## 🎨 转换示例
|
||
|
||
### 输入（Markdown）
|
||
```markdown
|
||
## 测试文档
|
||
|
||
这是一段**粗体**文本和*斜体*文本。
|
||
|
||
- 列表项 1
|
||
- 列表项 2
|
||
|
||
> 这是引用内容
|
||
|
||
代码示例：`console.log("Hello")`
|
||
|
||
|
||
```
|
||
|
||
### 输出（HTML）
|
||
所有格式和图片都会完美保留，可以直接粘贴到任何富文本编辑器！
|
||
|
||
## 📝 更新日志
|
||
|
||
### v2.2.1 (最新)
|
||
- 🐛 **统一占位符格式为 HTML 注释**
|
||
- ✅ 彻底修复代码块显示为 `CODE_BLOCK_0` 的问题
|
||
- ✅ 所有占位符（代码块、表格、图片、行内代码）统一使用 HTML 注释格式
|
||
- ✅ 增强调试日志，自动检测未还原的占位符
|
||
- ✅ 优化还原顺序，先还原块级元素，后还原行内元素
|
||
- 📊 新增转换统计信息，方便查看处理结果
|
||
|
||
### v2.2.0
|
||
- 🚀 **重新设计富文本编辑器兼容方案**
|
||
- ✅ 完全修复代码块和图片不显示的问题
|
||
- ✅ 优化剪贴板格式，提供简化 HTML 和完整 HTML 两种格式
|
||
- ✅ 使用 HTML 注释作为占位符，更安全可靠
|
||
- ✅ 添加降级方案，支持传统 execCommand 复制
|
||
- ✅ 添加详细调试日志，方便问题排查
|
||
- ✅ 改进占位符保护机制，支持嵌套 HTML 元素
|
||
- 🔧 优化内存使用，提高大文档处理性能
|
||
|
||
### v2.1.1
|
||
- 🐛 **修复占位符还原问题**
|
||
- ✅ 修复代码块显示为 `CODE_BLOCK_0` 的问题
|
||
- ✅ 修复图片显示为 `PROTECTED_HTML_0` 的问题
|
||
- ✅ 优化占位符命名，更简洁可靠
|
||
- ✅ 使用全局替换确保所有占位符正确还原
|
||
- ✅ 改进段落处理中的占位符识别
|
||
|
||
### v2.1.0
|
||
- 🚀 **完全重写 Markdown 转换引擎**
|
||
- ✅ 修复内容显示不全的问题
|
||
- ✅ 改进列表、引用块、代码块处理
|
||
- ✅ 增强段落识别逻辑
|
||
- ✅ 保护已转换的 HTML 标签
|
||
- ✅ 支持更多 Markdown 语法
|
||
- ✅ 更准确的文本样式转换
|
||
|
||
### v2.0.0
|
||
- ✨ 新增图片智能压缩功能
|
||
- ✨ 新增图片尺寸限制
|
||
- ✨ 新增可自定义配置
|
||
- ✨ 优化表格支持
|
||
- ✨ 改进 Markdown 转 HTML 转换
|
||
- 🐛 修复图片过大导致复制失败的问题
|
||
- 🐛 修复部分平台样式不兼容的问题
|
||
|
||
### v1.0.0
|
||
- 🎉 初始版本
|
||
- ✅ 基本的图片内嵌功能
|
||
|
||
## 📄 许可证
|
||
|
||
MIT License
|
||
|
||
## 🙋 反馈与支持
|
||
|
||
如有问题或建议，欢迎反馈！
|
||
|