1114 字
6 分钟
markdwon在线博客编辑器
前言
  在我们部署静态博客的时候,编写markdown博客不能像wordpress一样在线使用富文本编辑器来编辑页面,只能用其他的markdown编辑来编辑,如果要插入图片的话,每次引用截图图片都得先微信截图(或者Windows自带的截图),然后发送给自己,然后保存到本地,然后放入相应的文件夹,最后再用代码引入图片地址。非常的麻烦。所以我就在想可不可以开发一个在线编辑的项目来实现在线编辑,最后转md格式。结合AI鏖战了一下午把这个简陋的项目搞出来了。

界面样式

  以下的体验链接
  如下这是登录界面
AkEL8CBeNpgX.png
  如下这是编辑界面
k9MyOgQ5Fzr1.png  没错本片博客就是拿这个编辑编写的。

项目使用介绍以及注意事项

图片粘贴

  项目可以识别你的剪切板,包括你的微信截图和window快捷键截图,直接粘贴上去即可,但是注意由于本项目最后要导出,所以图片不可避免地要上传到服务器。所以首先第一点,不要将敏感信息粘贴到博客中(不过话说博客是写给别人看的,一般人也不会粘贴重要图片),我项目每次重启都会清理文件夹目录以及初始化数据库。

一键变化格式

  项目上方的dock栏提供了一些必要的功能,可能不全,但是应该也够用了。
yixjKiNFUuym.png

对于博客框架的适配

  点击左边的三条横线的侧边连可以选择博客框架可以意见编辑博客的标题发布日期,标签以及分类,目前只对Astro框架做了适配,未来会对hugo,hexo做适配。当然大部分的博客的markdown上方的框架估计是差不多的,你可以试试直接导入,看看有没有什么问题。
FroNbm7lL9Jh.png
gA539dR9ws9l.png

导出功能的介绍

  博客的实现思想除了在线编辑最重要的就是对于图片上传的处理,在左侧栏目和最后的导出功能可以选择图片的路径,选择好后,图片路径都会变成相应的输入的/输入的路径/图片名称
  同时图片导出的路径也会也会存入相应的文件夹,你需要做的就是把md文件放入博客的posts文件夹中然后将图片放入的你相对应地址的文件夹中即可。地址引用时没有问题的。

插入链接功能

  项目提供插入超链接功能,你可以自己主动选择左上角的链接进行插入,也可以直接粘贴https的链接他会自动识别链接和显示的标题。
JBuA39CLCpsW.png

一些不足之处

  代码在处理逻辑中部分功能可能会存在一些bug,比如行内代码功能无法取消必须要另外起一行,还有代码块只能多选后选择代码块,不能点一下后一直输入,以及对比于wps等模块功能确实比较少。

在线项目链接的一些策略

  项目在凌晨两点点钟会关机,在每天早上八点开启,进行清理数据库以及上次的文件,请注意保存文章内容,同时服务器可能也会定时(可能会在晚上八点到九点)不定期的更新(主要是修复bug)。由于每次重启会清理数据,注意保存markdown内容

后言

  导出功能在这
9xHM29hbH6Kc.png
  项目后续会更新一些内容。毕竟我自己也要用,源代码过几天上传到github上。
markdwon在线博客编辑器
https://fuwari.vercel.app/posts/export_20250923_103425/
作者
木木em哈哈
发布于
2025-09-23
许可协议
CC BY-NC-SA 4.0