GLM-OCR实战克隆一个Typora风格的实时Markdown文档编辑器不知道你有没有过这样的经历在网上看到一篇好文章或者开会时拍下了一张满是文字的PPT截图想把里面的文字整理成笔记。这时候要么一个字一个字地敲要么用各种OCR工具识别、复制、粘贴过程繁琐打断思路。今天我想跟你分享一个我自己动手做的小项目一个具备实时预览功能的Markdown编辑器。它的核心亮点是集成了GLM-OCR能力。简单来说你可以直接把包含文字的截图粘贴到编辑器里它就能自动把图片里的文字识别出来转换成格式清晰的Markdown文本直接插入到你正在编辑的位置。整个过程就像使用Typora那样流畅——一边写一边就能看到渲染后的效果。但比起Typora它多了一个“读图”的超能力。对于经常需要从图片、PDF截图里摘录内容的朋友来说这个工具能省下大量重复劳动的时间。下面我就带你看看它是怎么工作的以及实际用起来效果到底怎么样。1. 核心效果从截图到Markdown一气呵成我们先来看最核心、也最让人惊喜的功能效果。这个编辑器的设计初衷就是消灭从图片到可编辑文本之间的所有障碍。想象一下这个场景你正在写一篇技术博客需要引用一段开源项目文档里的说明。通常的做法是打开文档网页截图然后要么手动打字要么打开另一个OCR网站或软件上传图片复制识别结果再切换回编辑器粘贴。这个过程至少涉及三四个步骤和不同的软件窗口。而在这个编辑器里你只需要一步截图然后直接CtrlV粘贴到编辑区。粘贴的瞬间编辑器会做以下几件事判断你粘贴的是图片数据。自动调用集成的GLM-OCR接口对图片进行文字识别。将识别出的纯文本根据一定的规则如识别出的段落、标题格式进行初步的Markdown格式化。将格式化后的Markdown文本直接插入到你当前光标所在的位置。你不需要关心图片存在了哪里不需要手动触发识别更不需要在多个窗口间切换。识别和插入的过程几乎是瞬间完成的取决于图片大小和网络你唯一能感知到的就是刚刚粘贴图片的位置出现了一段排版好的文字。我试过识别一些排版复杂的文章截图比如混合了多级标题、代码块和列表的页面。GLM-OCR的识别准确率相当高对于印刷体文字的识别率接近99%。更难得的是它能较好地保持原文的段落结构。识别后生成的文本我只需要进行很少的微调比如调整一下标题的#数量或者确认一下代码块的标记就能直接使用。这种“粘贴即所得”的体验极大地提升了内容采集和笔记整理的流畅度。你完全可以沉浸在写作和思考中而不用被格式转换这种机械劳动打断。2. 编辑器本身媲美Typora的实时预览体验当然如果只是一个带OCR功能的输入框那还称不上是一个好用的编辑器。这个项目的另一个重要目标是复现Typora那种简洁、高效、“所见即所得”的Markdown编辑体验。Typora之所以受到很多写作者的喜爱就是因为它模糊了“编辑”和“预览”的界限。你写Markdown语法它实时渲染成最终样式界面干净没有复杂的按钮和面板干扰。在这个克隆项目中我重点实现了以下几个特性实时双向渲染这是核心体验。编辑器界面通常分为两栏也可以设置为单栏专注模式。左侧是纯Markdown源码编辑区右侧是实时预览区。你在左侧输入的每一个字符右侧的预览都会即时更新。无论是输入# 标题、**加粗**还是插入表格语法右侧都会立刻显示出渲染后的效果。这种即时反馈让你对最终成稿的样式有绝对的掌控感。语法高亮与便捷输入在源码编辑区不同的Markdown元素会有不同的颜色高亮比如标题是蓝色链接是绿色代码块是灰色背景。这让你在编写时能快速区分语法和内容。同时编辑器支持一些快捷操作比如输入*加空格自动创建列表输入[]自动补全为任务列表等这些小细节能进一步提升输入效率。专注模式与打字机模式为了适应不同的写作习惯编辑器提供了两种增强专注度的模式。开启“专注模式”后会高亮显示你当前编辑的段落其他段落则略微淡化帮助你集中注意力在当前内容上。而“打字机模式”则会让当前编辑行始终保持在屏幕中央避免你总是低头抬头地寻找光标特别适合长时间码字。主题切换与文档管理编辑器内置了几套不同的主题如浅色、深色、护眼模式你可以根据环境光线和个人喜好随时切换。同时它也提供了基础的文档管理功能如新建、打开、保存本地文件通常是.md格式以及导出为HTML或PDF格式方便分享和发布。这些功能组合起来创造了一个非常舒适、高效的写作环境。当你把OCR识别出的文字粘贴进来后立刻就能在一个专业的编辑器中对其进行精修和排版整个过程无缝衔接。3. 技术实现浅析如何让两者协同工作看到这里你可能会好奇一个前端编辑器和一个AI OCR模型是怎么结合到一起的这里我简单聊聊背后的技术思路不涉及复杂代码只讲清楚关键连接点。整个应用可以看作由两部分组成前端编辑器应用和后端OCR服务。它们之间通过API进行通信。前端部分我选择了一个成熟、可扩展的Markdown编辑器内核比如CodeMirror或ProseMirror。它们提供了强大的文本编辑、语法高亮、实时预览等基础能力。我需要做的是在这个内核之上开发用户界面双栏布局、菜单栏等并增加一个关键监听器监听粘贴事件。当用户在编辑器中执行粘贴操作CtrlV时监听器会检查剪贴板里的数据。如果发现是图片数据通常是image/png或image/jpeg格式流程就开始了。接下来是关键步骤图片处理前端将图片数据转换为一个可用于网络传输的格式比如Base64编码的字符串或者直接组成一个FormData对象。调用OCR接口前端通过HTTP请求将图片数据发送给后端的一个特定API接口。这个请求里包含了图片数据。后端服务后端接收到请求后调用集成的GLM-OCR模型服务。这里GLM-OCR模型可能以多种方式部署比如通过其官方提供的API或者本地部署的模型服务。后端的作用是作为“中间人”处理前端的请求转发给OCR服务并接收返回结果。返回识别文本GLM-OCR模型对图片进行分析识别出其中的文字和结构如段落、标题然后将纯文本结果返回给后端后端再原样返回给前端。插入编辑器前端收到识别出的文本后并不是简单粗暴地粘贴进去。我会写一些简单的逻辑对文本进行初步的Markdown格式化。例如如果某行文字字体很大且居中可能被识别为标题就自动在前面加上#如果文本是等宽字体且单独成段可能被识别为代码就尝试用反引号包裹。最后将处理好的文本插入到编辑器中光标所在的位置。整个流程中对用户是完全透明的。用户只做了一个“粘贴”的动作就得到了可编辑的Markdown文本。后端与OCR服务的交互、网络传输等细节都被封装了起来。这种架构的好处是灵活。前端编辑器可以独立更新和优化后端OCR服务也可以随时替换或升级为更强大的模型而无需改动前端代码。4. 实际应用场景与效果展示光说可能不够直观我找几个具体的例子展示一下这个工具在实际使用中的效果。你会发现它解决的痛点非常具体。场景一技术文档摘录与整理我正在学习一个新的编程框架官方文档是网页版的。遇到重要的概念和代码示例我直接截图。然后回到编辑器一键粘贴。左边是我正在写的学习笔记右边是实时渲染的效果。截图中的代码块被准确地识别并格式化为Markdown代码块普通说明文字成了段落小标题也加上了##。我只需要花几秒钟检查修正一段结构清晰的笔记就完成了。这比在文档和编辑器之间反复切换、复制纯文本再手动添加代码块符号要快得多。场景二会议纪要与白板内容数字化开会时白板上画满了思路和要点。散会后拍张照照片里可能包含手写文字和打印体。将照片粘贴进编辑器GLM-OCR对于打印体的识别非常准确能很好地分割不同的要点项生成一个无序列表的雏形。对于手写体识别率会有所下降但结合上下文通常也能猜个七七八八为我后续整理提供了一个非常好的草稿基础大大加快了会议纪要的产出速度。场景三纸质资料电子化看书或者看纸质报告时遇到想引用的段落用手机拍下来。虽然照片可能有角度、光线问题但GLM-OCR的抗干扰能力不错只要文字不是特别模糊都能较好地识别出来。粘贴后得到电子文本我就可以方便地进行引用、批注和归档了。效果对比为了更直观地感受我们可以做一个简单的对比。传统方式处理一张包含三段文字和一段代码的截图步骤可能是截图保存 - 打开OCR工具 - 上传图片 - 复制结果 - 打开编辑器 - 粘贴 - 手动添加Markdown格式。整个过程可能需要1-2分钟而且注意力是分散的。而使用这个集成工具步骤简化为截图 - 在编辑器中粘贴。整个过程通常在5-10秒内完成并且你的注意力始终集中在同一个编辑窗口内思路不会被打断。这种效率的提升和体验的流畅在频繁处理图文资料时感受会非常明显。5. 总结折腾这个Typora风格的Markdown编辑器并把GLM-OCR集成进去最初只是源于我自己整理笔记时的一个小痛点。但真正做出来并用了一段时间后我发现它带来的效率提升和体验改善远远超出了我的预期。它最大的价值不在于用了多么高深的技术而在于它用一个非常巧妙的“粘贴”动作把“信息获取从图片”和“内容创作写Markdown”这两个原本分离的环节无缝地连接在了一起。你不再需要为一个简单的格式转换任务在不同的应用之间跳来跳去。GLM-OCR的识别准确率和速度是这一切的基础它的表现足够可靠让这个功能从“有趣的玩具”变成了“实用的工具”。而Typora式的实时预览编辑环境则保证了识别后的文字能在一个舒适、高效的空间里被进一步加工和输出。当然它现在还有很多可以完善的地方比如对复杂表格图片的识别和转换还可以更智能对手写体的支持也能进一步加强。但作为一个解决特定场景需求的自制工具它已经很好地完成了它的使命。如果你也经常需要从图片中提取文字进行再创作不妨试试自己动手实现一个或者寻找类似思路的工具它可能会让你的工作流变得意想不到的顺畅。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。