1. 项目简介
蓝笺（BlueNote 4.0）是一款面向微信公众号技术文章、科研内容和工程笔记的在线排版编辑器。项目采用单文件 HTML 架构，将页面结构、样式系统和交互逻辑集中在一个文件中，无须安装运行环境或部署后端服务，使用浏览器打开即可运行。
编辑器支持 Markdown 写作、可视化编辑、HTML 查看、实时预览、主题切换、图片排版、本地草稿、项目备份以及微信公众号富文本复制等功能。
2. 技术架构
项目主要由三部分组成：
bluenote-editor-v4.html
├── HTML：页面结构和功能面板
├── CSS：界面布局、主题样式和响应式设计
└── JavaScript：编辑、渲染、存储和导入导出逻辑
整个应用运行在浏览器端，文章内容默认保存在 localStorage 中。若浏览器禁用本地存储，程序会自动切换到临时内存存储，但关闭页面后数据不会保留。
3. 页面组成
页面采用三栏式工作区：
- 左侧为功能面板，包含模块、图片、排版、主题和草稿管理；
- 中间为 Markdown、可视化和 HTML 编辑区域；
- 右侧为微信公众号正文实时预览及兼容性检查。
左侧栏支持折叠和锁定。未锁定时，点击外部区域会自动收起；锁定后则保持展开状态。全局搜索会统一检索功能、文章模块和主题，并直接执行对应操作。
4. 核心代码流程
编辑器的主要处理流程如下：
Markdown 输入
↓
parseMarkdown()
↓
buildArticleHtml()
↓
applyStyles()
↓
实时预览
↓
compileWechatHtml()
↓
复制到微信公众号
主要函数
| 函数 |
作用 |
parseMarkdown() |
将 Markdown 内容解析为 HTML |
buildArticleHtml() |
组合正文、目录、标题编号和文末推广 |
renderPreview() |
刷新右侧预览并执行兼容性检查 |
compileWechatHtml() |
将样式转换为适合微信公众号的内联样式 |
copyToWechat() |
将富文本和纯文本同时写入剪贴板 |
saveLocal() |
保存当前文章和排版配置 |
saveSnapshot() |
创建文章历史快照 |
importFile() |
导入 Markdown、HTML、TXT、JSON 和 DOCX |
exportProject() |
导出完整的蓝笺项目配置文件 |
项目没有使用第三方 Markdown 解析器，而是在 parseMarkdown() 中自行处理标题、段落、列表、代码块、表格、引用和自定义提示块，因此便于针对微信公众号排版规则进行扩展。
5. 微信公众号兼容处理
微信公众号后台可能会删除部分 CSS，并且对 flex、grid 等布局支持不稳定。为提高粘贴后的稳定性，程序会在复制前执行以下处理：
- 将文章样式转换为元素内联样式；
- 将多图布局和文末推广转换为表格布局；
- 为正文设置明确的字号、行高和字距；
- 将外部链接转换为脚注；
- 检查本地图片、宽表格、公式和外部链接。
多图布局转换为表格的处理集中在 compileWechatHtml() 中。
复制时优先使用现代浏览器的 ClipboardItem API，同时写入 HTML 和纯文本；如果浏览器不支持，则自动使用传统的 document.execCommand('copy') 作为兼容方案。
6. 主题与排版系统
主题数据统一保存在 themes 对象中。每个主题包含主色、辅助色、强调色、正文颜色、代码背景、表头颜色及标题样式预设。
const themes = {
skyTech: {
name: '浅蓝科技',
primary: '#2f6d9f',
secondary: '#5a9ed0',
codeBg: '#172638',
preset: {
h2Style: 'bar',
h3Style: 'line',
codeStyle: 'dark'
}
}
};
这种数据驱动方式使新增主题较为简单，只需增加一组颜色和样式配置，无须重新编写页面结构。当前项目已内置科技蓝、学术灰、森林绿、暖色、紫色、黑白及深色代码等多种主题。
7. 本地存储与备份
编辑器分别使用多个存储键管理数据：
STORAGE_KEY // 当前文章
DRAFTS_KEY // 草稿副本
HISTORY_KEY // 历史快照
CUSTOM_THEMES_KEY // 自定义主题
RECENT_BLOCKS_KEY // 最近使用模块
编辑内容发生变化后，程序通过约 550 ms 的延迟保存机制减少频繁写入。系统最多保留 15 个历史快照，并每隔十分钟自动创建一次快照。
由于数据保存在当前浏览器中，清理浏览器缓存、更换浏览器或更改网页文件路径后，原有草稿可能无法读取，因此重要文章应定期导出 .bluenote.json 项目文件。
8. 导入、导出与外部依赖
项目支持导出以下格式：
- 微信兼容 HTML；
- Markdown；
- Word 文档；
- PDF或浏览器打印；
- 长图 PNG；
- 蓝笺项目 JSON。
DOCX 导入依赖 Mammoth.js，长图生成依赖 html2canvas。这两个组件通过 CDN 加载，因此离线状态下 DOCX 导入和 PNG 导出可能不可用，但 Markdown 编辑、预览、本地保存及 HTML 导出等核心功能仍可正常运行。
9. 运行方式
直接使用浏览器打开 HTML 文件即可：
双击 bluenote-editor-v4.html
推荐使用较新版本的 Chrome、Edge 或其他 Chromium 浏览器。首次使用时可先导出一个项目文件，用于验证浏览器下载和本地存储功能是否正常。
10. 后续扩展建议
后续可将 CSS、主题数据和 JavaScript 拆分为独立文件，并引入模块化构建工具，以便维护大型功能。同时可增加 IndexedDB 图片存储、插件系统、云端同步、文章模板市场以及更严格的 HTML 内容安全过滤。
发表于 2026-7-17 17:06
|
发表于 2026-7-17 17:30
