# Bulk Copy with Images - v3.5.0 🚀 一键复制 Obsidian 笔记全文或选中内容，优先导出 Obsidian 当前真实渲染结果，并将关键样式内联到 HTML 中。图片会自动压缩并内嵌为 base64，同时按目标平台做差异化适配。 当前主路径已升级为：`预览 DOM 导出 > 离屏渲染 > Markdown fallback`。 ## ✨ 核心功能 ### 🎯 一键平台适配（已优化） - ✅ **微信公众号**：完全内联样式，完美兼容！图片宽度 900px - ✅ **飞书文档**：完整样式支持，图片宽度 1000px - ✅ **知乎**：代码高亮良好，图片宽度 800px - ✅ **语雀**：样式完整，图片宽度 900px - ✅ **智能参数优化**：自动应用平台最佳配置 - ✅ **兼容性提示**：提前告知哪些内容可能被平台过滤 ### 🧠 导出架构（v3.5） - ✅ **真实预览 DOM 优先**：默认不再以手写 Markdown 转 HTML 作为主路径 - ✅ **离屏渲染兜底**：在没有可用阅读视图，或复制选中内容时优先统一走离屏渲染 - ✅ **computed style 内联**：段落、标题、列表、引用、代码块、表格、图片等关键样式会固化到节点 - ✅ **平台能力模型**：微信、飞书、知乎、语雀使用不同的导出策略 - ✅ **Markdown fallback**：仅在 DOM 路径不可用时才退回旧转换逻辑 ### 📱 微信公众号专项优化（v3.2 新功能）🔥 **问题解决**：微信公众号会过滤外部样式表，导致粘贴后没有样式。 **解决方案**： - ✅ **完全内联样式**：所有样式直接写在 HTML 标签的 `style` 属性中 - ✅ **优化图片宽度**：900px，适合手机阅读 - ✅ **优化字体大小**：16px，符合公众号最佳实践 - ✅ **优化行高**：1.75，提升阅读体验 - ✅ **增强段落格式**：两端对齐，更专业 - ✅ **所有元素支持**：标题、列表、引用、代码块、表格等 - ✅ **图片完美显示**：base64 内嵌，无需外链 **效果对比**： ``` 优化前：粘贴后是纯文字，没有样式 ❌ 优化后：完美保留所有格式和样式 ✅ ``` ### ⚙️ 配置与平台切换 - ✅ **平台选择器**：复制时可直接选择目标平台 - ✅ **默认平台**：支持快速复制并自动套用默认预设 - ✅ **插件设置页**：可直接调整默认平台、图片宽度、压缩质量和常用开关 - ✅ **平台主题**：每个平台都可以单独设置导出主题样式，不再强依赖 Obsidian 当前主题 - ✅ **平台主题包**：内置公众号商务风、公众号极简风、知乎长文风、飞书团队文档风、语雀知识库风等主题包 - ✅ **推荐主题提示**：按平台给出推荐主题，帮助快速选择更合适的风格 - ✅ **自定义主题**：支持编辑“我的主题”，并分配给任意平台使用 - ✅ **多个自定义主题模板**：支持新增、切换和删除多个自定义主题，并分配给不同平台 - ✅ **复制当前主题**：支持基于当前自定义主题快速复制出一份副本继续调整 - ✅ **主题导出/导入与排序**：支持导出 JSON、导入主题，以及上移/下移调整自定义主题顺序 - ✅ **整套主题备份与恢复**：支持导出/导入全部自定义主题、顺序和当前编辑主题状态 - ✅ **主题搜索/筛选**：在自定义主题编辑器中可按名称快速筛选模板 - ✅ **专门的主题管理区**：自定义主题在设置页中以独立管理区呈现，便于集中管理模板 - ✅ **独立主题管理器**：可通过单独入口打开主题模板管理器，集中处理搜索、排序、导入导出与编辑 - ✅ **更正式的 JSON 导入导出**：使用专用 JSON 面板查看导出内容、粘贴导入内容并确认导入 - ✅ **两栏主题管理器**：左侧主题列表、右侧编辑区，便于在多个模板间快速切换和编辑 - ✅ **更清晰的编辑分区**：主题管理器右侧按搜索切换、模板管理、基础样式、颜色设置分区展示 - ✅ **右侧标签切换**：主题管理器右侧支持“基础 / 颜色 / 导入导出”切换，降低单屏信息密度 - ✅ **管理器内主题预览**：主题管理器右侧支持“预览”标签，编辑时可直接查看主题效果 - ✅ **预览平台切换**：可在主题管理器中切换微信/飞书/知乎/语雀容器查看同一主题效果 - ✅ **细节状态摘要**：预览标签会显示标题分隔线、表头底色、图片圆角、代码块边框的当前状态 - ✅ **独立细节标签**：主题管理器右侧支持“细节”标签，专门编辑四项主题细节开关 - ✅ **平台绑定摘要**：左侧主题列表会显示每个主题当前被哪些平台使用 - ✅ **颜色缩略预览**：左侧主题列表会展示主题的关键颜色缩略点 - ✅ **删除前确认提示**：删除正在被平台使用的主题时，会明确提示受影响平台并确认 - ✅ **使用中排序/筛选**：左侧主题列表支持“仅看使用中”和“使用中优先” - ✅ **按平台推荐筛选**：左侧主题列表支持按当前预览平台的推荐主题进行筛选 - ✅ **左侧列表可折叠**：主题管理器支持折叠/展开左侧主题列表，聚焦右侧编辑区 - ✅ **推荐主题对比预览**：预览标签可展示当前主题与平台推荐主题的对比效果 - ✅ **并排对比布局**：当前主题与推荐主题在预览标签中左右并排展示，更方便直接比较 - ✅ **差异提示**：预览对比区会直接提示当前主题与推荐主题在细节开关上的不同 - ✅ **颜色差异提示**：预览对比区会列出当前主题与推荐主题在关键颜色上的不同 - ✅ **推荐徽标快捷预览**：点击左侧“推荐中”徽标可快速切换到对应平台预览 - ✅ **推荐主题一键应用**：可在预览对比区直接把推荐主题应用到当前预览平台 - ✅ **撤销推荐应用**：应用推荐主题后可一键撤销，恢复到应用前的平台主题状态 - ✅ **推荐使用徽标**：左侧主题列表会标记哪些主题正作为推荐主题被平台使用 - ✅ **恢复推荐主题**：每个平台都可以一键恢复到推荐主题，并清空局部主题细节覆盖 - ✅ **更直观的颜色编辑**：自定义主题支持颜色选择器和十六进制手动输入 - ✅ **更友好的主题控件**：字体支持常用预设，圆角和行高支持更直观的选择与输入 - ✅ **弹窗预览信息**：平台选择弹窗会显示当前主题、图片策略和图片参数 - ✅ **主题细节微调**：支持按平台控制标题分隔线、表头底色、图片圆角、代码块边框 - ✅ **各平台独立细调**：每个平台都可以分别配置自己的主题细节，而不共享同一套开关 - ✅ **设置页平台分组**：按平台折叠管理主题、图片策略和细节参数，并提供主题预览 - ✅ **更完整的主题预览**：预览区覆盖标题、正文、列表、行内代码、引用、表格、代码块和图片 - ✅ **平台容器模拟**：主题预览会模拟不同平台的容器宽度、背景和留白氛围 - ✅ **更清晰的设置页排版**：基础配置、当前平台、自定义主题、各平台配置和行为偏好分区展示 ### 📱 完整 Markdown 语法支持 - ✅ **Wiki 链接**：支持 `[[link]]` 和 `[[link|text]]` - ✅ **标签**：支持 `#tag` 带特殊样式 - ✅ **任务列表**：支持 `- [ ]` 和 `- [x]` 任务复选框 - ✅ **Callouts**：支持 `> [!type]` 调用框（info、warning、tip 等） - ✅ **数学公式**：支持行内 `$formula$` 和块级 `$$formula$$` - ✅ **标准 Markdown**：标题、列表、引用、代码块、表格、链接等 ### 🎨 Obsidian 主题样式保留 - ✅ **自动检测主题**：自动识别当前使用的是亮色还是暗色主题 - ✅ **提取主题样式**：从 Obsidian 当前主题中提取关键颜色、边框和代码块背景等 token - ✅ **CSS 变量支持**：读取 Obsidian 主题定义的 CSS 变量 - ✅ **尽量贴近预览效果**：复制后的内容尽可能接近 Obsidian 当前阅读视图 - ✅ **代码块基础保真**：优先保住背景、边距、字体和滚动行为 ### 🔮 智能渲染引擎 - ✅ **预览视图优先**：优先从 Obsidian 阅读/预览视图提取真实 DOM - ✅ **离屏渲染兜底**：没有可用预览 DOM 时，先渲染到临时容器再导出 - ✅ **DOM 级图片处理**：直接处理渲染后的 `` 节点并内嵌图片 - ✅ **元素过滤**：自动移除 Obsidian 专属控件和无意义属性 ### ⚡ 性能优化 - ✅ **并行图片处理**：批量处理多张图片，速度提升 80% - ✅ **样式缓存**：避免重复计算，速度提升 90% - ✅ **进度提示**：处理大量图片时显示实时进度 ### 智能图片处理 - ✅ **自动压缩**：大图自动缩放到合适尺寸 - ✅ **质量优化**：在清晰度和文件大小间取得平衡 - ✅ **优先保清晰度**：PNG 截图等图片会尽量保留原格式，避免被统一转成模糊 JPEG - ✅ **显示控制**：限制图片最大显示宽度，避免过长 - ✅ **格式自适应**：根据图片类型和平台策略决定是否保留原格式或转换 - ✅ **特殊处理**： - SVG：保持矢量格式 - GIF：保留动画效果 - PNG/JPG：智能压缩 ## 📖 使用方法 ### 🎯 方法 1：使用平台选择器（推荐）🔥 **每次复制时选择目标平台，确保最佳效果** 1. 打开任意 Markdown 笔记 2. 按 `Ctrl+Shift+C`（复制全文）或 `Ctrl+Shift+V`（复制选定内容） 3. **弹出平台选择框**： - 💬 微信公众号 - 📝 飞书云文档 - 💡 知乎 - 📚 语雀 4. 选择你要复制到的平台 5. 点击"立即复制" 6. 粘贴到目标平台 **优势**： - ✅ 每次都确保使用正确的样式 - ✅ 显示平台兼容性提示 - ✅ 直观易用，零学习成本 --- ### ⚡ 方法 2：快速复制（使用默认平台） **适合经常复制到同一个平台的用户** 1. 在设置中选择"默认平台" 2. 按 `Ctrl+Alt+C`（复制全文）或 `Ctrl+Alt+V`（复制选定内容） 3. 直接粘贴，无需选择平台 --- ### 📋 方法 3：命令面板 1. 按 `Ctrl+P`（Windows/Linux）或 `Cmd+P`（Mac） 2. 输入"复制" 3. 选择命令： - "复制全文（选择平台）" - 选择平台后复制 - "复制选定内容（选择平台）" - 选择平台后复制 - "快速复制全文" - 使用默认平台 - "快速复制选定内容" - 使用默认平台 --- ### ⚙️ 方法 4：设置默认平台 1. 打开设置 → "Bulk Copy with Images" 2. 选择默认平台并按需调整图片参数与开关 3. 之后使用快捷键时自动应用该平台的样式 --- ### ⌨️ 快捷键说明 | 快捷键 | 功能 | 说明 | |--------|------|------| | `Ctrl+Shift+C` | 复制全文（选择平台） | 每次复制时弹出平台选择框 | | `Ctrl+Shift+V` | 复制选定内容（选择平台） | 每次复制时弹出平台选择框 | | `Ctrl+Alt+C` | 快速复制全文 | 使用默认平台，无需选择 | | `Ctrl+Alt+V` | 快速复制选定内容 | 使用默认平台，无需选择 | ### 使用场景 **场景 1：经常复制到不同平台** - 使用 `Ctrl+Shift+C`，每次选择平台 - 确保每次都使用正确的样式 **场景 2：经常复制到同一平台** - 在设置中设置默认平台 - 使用 `Ctrl+Alt+C` 快速复制 - 节省选择时间 --- ## 🎨 平台选择器详解 ### 界面展示 ``` ┌─────────────────────────────────────┐ │ 📋 选择目标平台 │ │ 选择你要复制到的平台，将自动应用最佳样式 │ ├─────────────────────────────────────┤ │ ┌─────────────────────────────────┐ │ │ │ 💬 微信公众号 ✓ │ │ │ │ 适合微信公众号，图片宽度900px │ │ │ │ │ │ │ │ ℹ️ 代码块使用截图效果最佳 │ │ │ │ ℹ️ 表格可能显示异常 │ │ │ └─────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────┐ │ │ │ 📝 飞书云文档 │ │ │ │ 适合飞书文档，图片宽度1000px │ │ │ │ │ │ │ │ ℹ️ 支持完整的样式和代码高亮 │ │ │ │ ℹ️ 推荐使用此预设 │ │ │ └─────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────┐ │ │ │ 💡 知乎 │ │ │ │ 适合知乎回答，图片宽度800px │ │ │ └─────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────┐ │ │ │ 📚 语雀 │ │ │ │ 适合语雀文档，图片宽度900px │ │ │ └─────────────────────────────────┘ │ │ │ │ [取消] [立即复制] │ └─────────────────────────────────────┘ ``` ### 特性 - 🎯 **智能推荐**：显示平台特点和兼容性提示 - ✅ **一键选择**：点击即可选择平台 - 📊 **兼容性报告**：提前告知注意事项 - 🎨 **美观界面**：现代化的设计风格 ## ⚙️ 配置说明 ### 平台预设（无需手动配置） | 平台 | 图片宽度 | 压缩质量 | 特点 | |------|---------|---------|------| | 微信公众号 | 900px | 0.85 | 强内联样式，callout / 表格会保守降级 | | 飞书云文档 | 1000px | 0.85 | 完整样式，推荐使用 | | 知乎 | 800px | 0.8 | 代码高亮支持良好 | | 语雀 | 900px | 0.8 | 样式完整，推荐使用 | ### 高级配置 当前版本优先通过插件设置页调整；更底层的细节仍可通过 `main.js` 顶部的 `USER_CONFIG` 和 `IMAGE_CONFIG` 调整。 如果你更关注图片清晰度，建议优先： - 将图片压缩质量设置到 `0.9` 以上 - 保持 `imageFormat: 'auto'` - 仅在确实需要控制体积时再降低图片宽度 每个平台都可以单独设置图片导出策略，建议如下： - `高清优先`：适合代码截图、界面截图、带文字的 PNG 图片 - `平衡`：适合日常文档复制 - `体积优先`：适合图片很多、目标平台体积限制严格的场景 ## 🎯 图片优化说明 ### 当前配置 ```javascript // 实际值会受当前平台预设和插件设置影响 const IMAGE_CONFIG = { MAX_WIDTH: 1000, QUALITY: 0.85, DISPLAY_MAX_WIDTH: 800 }; ``` ### 参数说明 #### 1. `MAX_WIDTH` - 压缩最大宽度 - **作用**：超过此宽度的图片会被等比缩放 - **默认值**：取决于当前平台预设，飞书默认 1000px - **建议值**： - 微信公众号：900px - 飞书文档：1000px - 知乎：800px - 如果图片需要更清晰：1200px - 如果想要更小的文件：600px #### 2. `QUALITY` - 压缩质量 - **作用**：控制 JPEG 压缩质量 - **默认值**：取决于当前平台预设，常用值为 0.8-0.85 - **建议值**： - 高质量（文件较大）：0.85-0.9 - 平衡模式（推荐）：0.75-0.85 - 高压缩（文件小，质量降低）：0.6-0.75 #### 3. `DISPLAY_MAX_WIDTH` - 显示最大宽度 - **作用**：导出 HTML 容器中的推荐显示宽度 - **默认值**：取决于当前平台预设 - **说明**： - 这个设置**不影响图片实际尺寸** - 只控制图片在编辑器中的显示宽度 - 避免图片在编辑器中显得过长 ### 如何自定义配置？ 优先在插件设置页中修改；如果需要更底层的调整，可以编辑 `main.js` 文件开头的配置： ```javascript const USER_CONFIG = { imageMaxWidth: 1000, imageQuality: 0.92, displayMaxWidth: 800 }; ``` ### 压缩效果对比 | 原始图片 | 压缩后 | 节省空间 | |---------|--------|---------| | 5MB, 3000x2000 | ~150KB | 97% | | 2MB, 1920x1080 | ~80KB | 96% | | 500KB, 800x600 | ~60KB | 88% | ## ⚙️ 配置说明 ### 高级配置 在 `main.js` 文件顶部可以配置以下参数： ```javascript const USER_CONFIG = { // 图片配置 imageMaxWidth: 800, // 图片压缩最大宽度 imageQuality: 0.8, // 压缩质量 (0-1) displayMaxWidth: 600, // 显示最大宽度 imageFormat: 'auto', // 图片格式: auto/jpeg/png/webp compressGif: false, // 是否压缩 GIF（false 保持动画） // 功能开关 enableCodeHighlight: true, // 启用代码高亮 enableThemeStyles: true, // 启用主题样式保留 enableFrontmatter: false, // 包含 Frontmatter enableProgressNotice: true, // 显示进度提示 // 性能配置 parallelImageProcessing: true, // 并行处理图片 maxParallelImages: 5, // 最大并行图片数 themeStylesCache: true, // 缓存主题样式 // 导出配置 includeFrontmatter: false, // 包含 YAML 前置内容 clipboardFormats: ['text/html', 'text/plain'], // 剪贴板格式 }; ``` ### 性能优化建议 **大量图片处理**： - 启用 `parallelImageProcessing: true` 并行处理 - 增加 `maxParallelImages` 到 8-10（根据设备性能） - 启用 `enableProgressNotice: true` 查看进度 **大文档处理**： - 启用 `themeStylesCache: true` 缓存样式 - 减少图片数量或压缩质量 **快速复制**： - 降低 `imageQuality` 到 0.6-0.7 - 降低 `imageMaxWidth` 到 600-700 ## 📖 使用方法 ### 方法 1：快捷键 1. 打开任意 Markdown 笔记 2. 按 `Ctrl+Shift+C`（Windows/Linux）或 `Cmd+Shift+C`（Mac）复制全文 3. 或者选择部分内容后按 `Ctrl+Shift+V`（Windows/Linux）或 `Cmd+Shift+V`（Mac）复制选定内容 4. 粘贴到目标编辑器 ### 方法 2：命令面板 1. 按 `Ctrl+P`（Windows/Linux）或 `Cmd+P`（Mac） 2. 输入"复制" 3. 选择相应的命令： - "复制全文（选择平台）" - 复制整个文档 - "复制选定内容（选择平台）" - 仅复制选中的内容 - "快速复制全文（使用默认平台）" - "快速复制选定内容（使用默认平台）" 4. 粘贴到目标编辑器 ## 💡 使用技巧 ### 1. 不同平台的建议配置 优先直接使用内置平台预设： - 微信公众号：更强的内联样式和保守降级 - 飞书云文档：高保真导出，推荐默认使用 - 知乎：在样式保真和兼容性之间取平衡 - 语雀：接近飞书，但更保守一些 ### 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: 调整 `displayMaxWidth`、`imageMaxWidth` 和对应平台预设参数。 ### Q: 压缩会影响图片清晰度吗？ A: 会有轻微影响，但肉眼难以察觉。可以通过提高 `QUALITY` 来改善。 ### Q: 支持哪些图片格式？ A: PNG, JPG, JPEG, GIF, WebP, SVG, BMP, TIFF 等常见格式。 ### Q: 动图会变成静态图吗？ A: 不会，GIF 动图会保留动画效果。 ### Q: 某些块的样式仍然不完整怎么办？ A: 1. 优先在阅读视图下复制，让插件直接导出真实预览 DOM 2. 如果是选中内容，插件会优先走离屏渲染；复杂块仍可能被平台过滤 3. 微信公众号对表格、复杂代码块、数学公式本身就更严格，建议接受保守降级 4. 查看控制台中的 `[bulk-copy]` 日志，确认本次复制走的是 `preview-dom`、`offscreen-render` 还是 `markdown-fallback` ### Q: 在某些平台粘贴后格式丢失？ A: 1. 使用 `Ctrl+Shift+V`（纯文本粘贴）可能会丢失格式 2. 应该使用 `Ctrl+V`（富文本粘贴） 3. 某些平台（如 Notion）有特殊的粘贴处理，可能需要多试几次 4. 微信公众号建议在新版编辑器中使用 ## 📋 支持的 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） 所有格式和图片都会完美保留，可以直接粘贴到任何富文本编辑器！ ## 📝 更新日志 ### v3.5.0 - ✅ 导出主路径升级为 `预览 DOM 导出 > 离屏渲染 > Markdown fallback` - ✅ 新增 DOM 清洗、样式内联、平台适配、DOM 级图片内联和独立剪贴板写入层 - ✅ `markdownToHtml()` 降级为兜底逻辑，不再作为默认主路径 - ✅ 微信公众号、飞书、知乎、语雀预设升级为能力模型 - ✅ 图片导出策略改为优先保清晰度，减少不必要的 JPEG 转码和过度压缩 - ✅ README 与 manifest 描述同步到当前实现 ### 历史版本 - 早期版本主要围绕图片内嵌、Markdown 转 HTML、平台兼容和稳定性修复逐步演进。 ## 📄 许可证 MIT License ## 🙋 反馈与支持 如有问题或建议，欢迎反馈！