Go to file

taiyi 5a4b3e66bd 1. 支持markdown和富文本编辑器 2. 完善代码块和图片复制粘贴		2025-10-16 22:15:22 +08:00
.idea	第一次提交，完成copy操作，存在问题，飞书云文档复制出现问题	2025-10-16 21:39:52 +08:00
main.js	1. 支持markdown和富文本编辑器	2025-10-16 22:15:22 +08:00
manifest.json	1. 支持markdown和富文本编辑器	2025-10-16 22:15:22 +08:00
README.md	1. 支持markdown和富文本编辑器	2025-10-16 22:15:22 +08:00
styles.css	第一次提交，完成copy操作，存在问题，飞书云文档复制出现问题	2025-10-16 21:39:52 +08:00

README.md

Bulk Copy with Images - 图片优化增强版

一键复制 Obsidian 笔记全文，自动转换为富文本 HTML，图片内嵌为 base64。完美支持飞书云文档、微信公众号、知乎等多种编辑器平台。

✨ 核心功能

1. 完整的排版保留（增强版）

✅ 标题：H1-H6 所有级别，保留层级结构
✅ 文本格式：粗体、斜体、粗斜体、删除线、高亮
✅ 代码：代码块（支持语法标记）、行内代码（完整转义）
✅ 列表：有序列表、无序列表（支持混合）
✅ 引用块：多行引用，保持完整格式
✅ 表格：完整的 Markdown 表格转换
✅ 链接：自动转换并添加安全属性
✅ 分割线：支持 ---、***、___ 三种格式
✅ 换行：支持双空格换行
✅ 段落：智能识别段落，保持原有结构

2. 智能图片处理

✅ 自动压缩：大图自动缩放到合适尺寸
✅ 质量优化：在清晰度和文件大小间取得平衡
✅ 显示控制：限制图片最大显示宽度，避免过长
✅ 格式转换：统一转为 JPEG 格式（压缩率更高）
✅ 特殊处理：
- SVG：保持矢量格式
- GIF：保留动画效果
- PNG/JPG：智能压缩

3. 多平台兼容

飞书云文档 ✅
微信公众号 ✅
知乎 ✅
语雀 ✅
Notion ✅
其他富文本编辑器 ✅

🎯 图片优化说明

当前配置

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，修改文件开头的配置：

/* ========== 图片优化配置 ========== */
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：快捷键

打开任意 Markdown 笔记
按 Ctrl+Shift+C（Windows/Linux）或 Cmd+Shift+C（Mac）
粘贴到目标编辑器

方法 2：命令面板

按 Ctrl+P（Windows/Linux）或 Cmd+P（Mac）
输入"复制全文"
选择"复制全文并内嵌本地图片"
粘贴到目标编辑器

💡 使用技巧

1. 不同平台的建议配置

微信公众号（推荐当前配置）

MAX_WIDTH: 800
QUALITY: 0.8
DISPLAY_MAX_WIDTH: 600

飞书云文档（可以更高清）

MAX_WIDTH: 1000
QUALITY: 0.85
DISPLAY_MAX_WIDTH: 700

知乎（兼顾质量和加载速度）

MAX_WIDTH: 800
QUALITY: 0.8
DISPLAY_MAX_WIDTH: 600

2. 图片过大怎么办？

如果复制后提示"图片太大"或粘贴失败：

降低 MAX_WIDTH（如改为 600 或 700）
降低 QUALITY（如改为 0.7）
或者将大图片分开发送

3. 图片不够清晰？

如果复制后图片显示模糊：

提高 MAX_WIDTH（如改为 1000 或 1200）
提高 QUALITY（如改为 0.85 或 0.9）

🔧 技术细节

图片处理流程

读取图片 → 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: 代码块或图片还是显示为占位符怎么办？

打开浏览器开发者工具（F12）
切换到 Console（控制台）标签
复制文档时查看输出的调试信息
检查是否有 [bulk-copy] HTML Content Preview: 日志
如果 HTML 预览中已经包含正确内容，问题可能在剪贴板或目标平台
尝试在不同浏览器中测试（推荐 Chrome/Edge）

Q: 在某些平台粘贴后格式丢失？

使用 Ctrl+Shift+V（纯文本粘贴）可能会丢失格式
应该使用 Ctrl+V（富文本粘贴）
某些平台（如 Notion）有特殊的粘贴处理，可能需要多试几次
微信公众号建议在新版编辑器中使用

📋 支持的 Markdown 语法清单

以下所有语法都会被正确转换为 HTML：

标题

# H1 标题
## H2 标题
### H3 标题
#### H4 标题
##### H5 标题
###### H6 标题

文本格式

**粗体文本**
*斜体文本*
***粗斜体***
~~删除线~~
==高亮文本==

列表

- 无序列表项 1
- 无序列表项 2
  
1. 有序列表项 1
2. 有序列表项 2

引用

> 这是一段引用
> 可以有多行

代码

`行内代码`

\```javascript
// 代码块
function hello() {
  console.log("Hello!");
}
\```

表格

| 列1 | 列2 | 列3 |
|-----|-----|-----|
| 数据1 | 数据2 | 数据3 |
| 数据4 | 数据5 | 数据6 |

链接和图片

[链接文本](https://example.com)
![图片描述](图片路径.png)
![[Obsidian 图片语法.png]]

分割线

---
***
___

🎨 转换示例

输入（Markdown）

## 测试文档

这是一段**粗体**文本和*斜体*文本。

- 列表项 1
- 列表项 2

> 这是引用内容

代码示例：`console.log("Hello")`

![图片](image.png)

输出（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

🙋 反馈与支持

如有问题或建议，欢迎反馈！

README.md Unescape Escape