最佳 Markdown 编辑器

概述

Best Markdown Editor是我最近创建的一个网站，旨在帮助我编写、编辑和导出所有 Markdown 文件。创建这个网站是因为我觉得有必要整合和简化我的 Markdown 工作流程。我最初用 VS Code 编写所有博客和 Markdown 文件，然后将它们粘贴到dev.to中。我会先用 VS Code 编写，因为我需要一个可以添加到我的 Next.js 博客的 Markdown 文件；然后我会将其粘贴到 Dev.to 的编辑器中；并且（因为这是一个网站），我会使用 Grammarly 帮我校对我的博客。我会用 Grammarly 进行编辑，然后将这些更改粘贴回我的 Markdown 文件中，这样所有内容就统一了。

我有一个 YouTube 视频，我也在其中介绍了该网站。

搜索

很长一段时间里，我都不知道该如何解决这个问题，直到我的朋友给我发了一篇博客，Top 15: Best Rich Text Editor Components for ReactJS。这立刻让我意识到，这是朝着正确方向迈出的重要一步。因此，我对 React 中的 Markdown 编辑器组件进行了进一步的研究，并偶然发现了这个宝藏，10+ Awesome React Markdown Editor Components。排名第二的是编辑器For Editor。它看起来简洁且功能丰富，所以我决定启动一个 React 应用来测试它。事实证明，它的设置和使用非常简单，开箱即用！

技术栈

您可以在此处找到我的开源 GitHub 组织的代码。

前端

• TypeScript
• 反应
• Firebase 身份验证
• Firebase 云存储
• React Hook 表单
• 字体真棒
• Sriracha UI（我为 React 构建的自定义样式库）

后端

• TypeScript
• 表达
• 克内克斯
• PostgreSQL

特征

当您来到最佳 Markdown 编辑器时，您可以点击“演示页面”链接，亲自试用该编辑器。我将所有内容保存在本地存储中，因此您无需担心丢失进度。登录后，所有Markdown 文件都将保存到数据库中，您可以根据需要进行管理。注册后，您还可以使用图片上传功能，将电脑中的图片作为 Markdown URL 标签上传到您的文件。此外，您还可以将 Markdown 文件.md直接导出到电脑。

我学到了什么

这个项目是我第一次设置云存储，感觉棒极了。整个构建过程非常有趣。我在早期测试中发现，当你下载PWA应用时，如果你下载的浏览器安装了Grammarly扩展程序，那么你就能在你下载的应用上使用该扩展程序。所以这就像你有一个带Grammarly的桌面应用来编辑你的Markdown文件，我觉得这太棒了。

结论

总而言之，我非常享受构建这个应用程序的过程，并且我期待着为这个网络应用程序创建许多新功能。

我想做的一件事是构建一个文件夹系统，将用户发布的 Markdown 文件存储在一个文件夹中。然后，用户可以使用他们的凭证访问我的后端，所有文件都存储在他们的前端，并使用我的数据库在他们的网站上列出他们发布的文件。我还需要花时间让它支持移动设备。目前，“最佳 Markdown 编辑器”已经针对平板电脑和桌面电脑进行了优化，因为我认为对于这个用例来说，平板电脑和桌面电脑是最重要的。但如果它也能支持移动设备就更好了。

如果您经常使用 Markdown，不妨尝试一下，然后告诉我您的想法！它也是开源的，所以如果您愿意提供帮助，尽管联系我。目前我最关心的两件事是：当新的推送发生变化时，如何为 PWA 创建更新；以及构建一个安全的架构，让用户能够访问我的数据库来获取他们发布的文件。如果您对这两件事有任何了解，我很乐意听取您的意见。感谢您的阅读！