md
v1.6.0
Markdown 文檔自動即時渲染為微信圖文,讓你不再為微信文章排版而發愁!只要你會基本的Markdown 語法,就能做出一篇樣式簡潔而又美觀大方的微信圖文。
注:推薦使用Chrome 瀏覽器,效果最佳。
現有的開源微信Markdown 編輯器,樣式繁雜,也不符合我個人的審美需求。在我使用它們進行文章排版的時候,經常還要自己做一些改動,費時費力,因此動手做了二次開發。
歡迎各位朋友隨時提交PR,讓這款微信Markdown 編輯器變得更好!如果你有新的想法,也歡迎在Discussions 討論區反饋。
注:我們項目最新版本基於Vue3 開發,基於Vue2 的舊版本已經不再維護,如果你需要Vue2 版本,請切換到1.x 分支。
| # | 圖床 | 使用時是否需要配置 | 備註 |
|---|---|---|---|
| 1 | 預設 | 否 | - |
| 2 | GitHub | 配置Repo 、 Token參數 | 如何獲取GitHub token? |
| 3 | 阿里雲 | 配置AccessKey ID 、 AccessKey Secret 、 Bucket 、 Region參數 | 如何使用阿里雲OSS? |
| 4 | 騰訊雲 | 配置SecretId 、 SecretKey 、 Bucket 、 Region參數 | 如何使用騰訊雲COS? |
| 5 | 七牛雲 | 配置AccessKey 、 SecretKey 、 Bucket 、 Domain 、 Region參數 | 如何使用七牛雲Kodo? |
| 6 | MinIO | 配置Endpoint 、 Port 、 UseSSL 、 Bucket 、 AccessKey 、 SecretKey參數 | 如何使用MinIO? |
| 7 | 公眾號 | 配置appID 、 appsecret 、代理域名參數 | 如何獲取公眾號開發者ID 密碼? |
| 8 | Cloudflare R2 | 配置AccountId 、 AccessKey 、 SecretKey 、 Bucket 、 Domain參數 | 如何使用S3 API 操作R2 |
| 9 | 自定義上傳 | 是 | 如何自定義上傳? |
在工具上沒有提供預定義圖床的情況下,你只需要自定義上傳邏輯即可,這對於例如你不方便使用公共圖床,而是使用自己的上傳服務時非常有用。
你只需要在給定的函數中更改上傳代碼即可,為了方便,這個函數提供了可能使用的一些參數:
示例代碼:
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, // tiny-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 服務空間配置如果你是Docker 用戶,也可以直接使用一條命令,啟動完全屬於你的、私有化運行的實例。
docker run -d -p 8080:80 doocs/md:latest容器運行起來之後,打開瀏覽器,訪問http://localhost:8080 即可。
關於本項目Docker 鏡像的更多詳細信息,可以關注https://github.com/doocs/docker-md
注:如果你使用了本Markdown 編輯器進行文章排版,並且希望在本項目README 中展示你的公眾號,請到#5 留言。