微信 Markdown 编辑器

项目介绍

本项目基于 wechat-format 进行二次开发，感谢 lyricat 的创意和贡献！

Markdown 文档自动即时渲染为微信图文，让你不再为微信文章排版而发愁！只要你会基本的 Markdown 语法，就能做出一篇样式简洁而又美观大方的微信图文。

在线编辑器地址

• Netlify: https://mdhere.netlify.app
• Gitee Pages：https://doocs.gitee.io/md
• GitHub Pages：https://doocs.github.io/md

注：推荐使用 Chrome 浏览器，效果最佳。另外，对于国内（中国）的朋友，访问 Gitee Pages 速度会相对快一些。

为何二次开发

现有的开源微信 Markdown 编辑器，样式繁杂，也不符合我个人的审美需求。在我使用它们进行文章排版的时候，经常还要自己做一些改动，费时费力，因此动手做了二次开发。

欢迎各位朋友随时提交 PR，让这款微信 Markdown 编辑器变得更好！如果你有新的想法，也欢迎在 Discussions 讨论区反馈。

功能特性

• 支持自定义 CSS 样式
• 支持 Markdown 所有基础语法
• 支持浅色、暗黑两种主题模式
• 支持 Ctrl + F 快速格式化文档
• 支持色盘取色，快速替换文章整体色调
• 支持多图上传，可自定义配置图床
• 支持自定义上传逻辑
• 支持在编辑框右键弹出功能选项卡

目前支持哪些图床

#	图床	使用时是否需要配置	备注
1	默认	否	-
2	Gitee	配置 Repo、Token 参数	图片超过 1MB 无法正常展示
3	GitHub	配置 Repo、Token 参数	如何获取 GitHub token？
4	阿里云	配置 AccessKey ID、AccessKey Secret、Bucket、Region 参数	如何使用阿里云 OSS？
5	腾讯云	配置 SecretId、SecretKey、Bucket、Region 参数	如何使用腾讯云 COS？
6	七牛云	配置 AccessKey、SecretKey、Bucket、Domain、Region 参数	如何使用七牛云 Kodo？
-	自定义上传逻辑	是	参考自定义上传逻辑

注意事项

如果你使用了某些浏览器脚本修改了网页背景色，可能导致渲染后的文章出现背景色分块的现象，详见 #63。

自定义上传逻辑

在工具上没有提供预定义图床的情况下，你只需要自定义上传逻辑即可，这对于例如你不方便使用公共图床，而是使用自己的上传服务时非常有用。

你只需要在给定的函数中更改上传代码即可，为了方便，这个函数提供了可能使用的一些参数：

示例代码：

const { file, util, okCb, errCb } = CUSTOM_ARG;
const param = new FormData();
param.append("file", file);
util.axios
  .post("http://127.0.0.1:9000/upload", param, {
    headers: { "Content-Type": "multipart/form-data" },
  })
  .then((res) => {
    okCb(res.url);
  })
  .catch((err) => {
    errCb(err);
  });

// 提供的可用参数:
// CUSTOM_ARG = {
//   content, // 待上传图片的 base64
//   file, // 待上传图片的 file 对象
//   util: {
//     axios, // axios 实例
//     CryptoJS, // 加密库
//     OSS, // ali-oss
//     COS, // cos-js-sdk-v5
//     Buffer, // buffer-from
//     uuidv4, // uuid
//     qiniu, // qiniu-js
//     tokenTools, // 一些编码转换函数
//     getDir, // 获取 年/月/日 形式的目录
//     getDateFilename, // 根据文件名获取它以 时间戳+uuid 的形式
//   },
//   okCb: resolve, // 重要！上传成功后给此回调传 url 即可
//   errCb: reject, // 上传失败调用的函数
// }

如果你创建了适用于其他第三方图床的上传代码，我们非常欢迎你分享它。

如何开发和部署

# 安装依赖
npm i

# 启动开发模式
npm start

# 部署在 /md 目录
npm run build
# 访问 http://127.0.0.1:9000/md

# 部署在根目录
npm run build:h5-netlify
# 访问 http://127.0.0.1:9000/

快速搭建私有服务

通过我们的 npm cli 你可以轻易搭建属于自己的微信 Markdown 编辑器。

# 安装
npm i -g @doocs/md-cli

# 启动
md-cli

# 访问
open http://127.0.0.1:8800/md/

# 启动并指定端口
md-cli port=8899

# 访问
open http://127.0.0.1:8899/md/

md-cli 支持以下命令行参数:

• port 指定端口号，默认 8800，如果被占用会随机使用一个新端口。
• spaceId dcloud 服务空间配置
• clientSecret dcloud 服务空间配置

谁在使用

Doocs开源社区	掘墓人的小铲子	全网重点	爱码士的内心独白	乐玩nodejs npm工具库	简静慢	0加1	编程图解
码云Gitee	好酸一柠檬	不知所云Hub	会泽百家	平凡而诗意	治恒说说	柯宁申的叙事屋	我的 Beta 世界
ApachePulsar	生化环材	秀宇笔记	IT王小二	小二来碗饭	青年技术宅	路引科研	凯文有事找你
软件部落库	网文小密圈

注：如果你使用了本 Markdown 编辑器进行文章排版，并且希望在本项目 README 中展示你的公众号，请到 #5 留言。

---

Doocs 社区优质项目

Doocs 技术社区，致力于打造一个内容完整、持续成长的互联网开发者学习生态圈！以下是 Doocs 旗下的一些优秀项目，欢迎各位开发者朋友持续保持关注。

#	项目	描述	热度
1	advanced-java	互联网 Java 工程师进阶知识完全扫盲：涵盖高并发、分布式、高可用、微服务、海量数据处理等领域知识。
2	leetcode	多种编程语言实现 LeetCode、《剑指 Offer（第 2 版）》、《程序员面试金典（第 6 版）》题解。
3	source-code-hunter	互联网常用组件框架源码分析。
4	jvm	Java 虚拟机底层原理知识总结。
5	coding-interview	代码面试题集，包括《剑指 Offer》、《编程之美》等。
6	md	一款高度简洁的微信 Markdown 编辑器。
7	technical-books	值得一看的技术书籍列表。

贡献者

感谢以下所有朋友对 Doocs 技术社区 所做出的贡献，参与项目维护请戳这儿。