md
v1.6.0
Markdown documents are automatically rendered as WeChat pictures and texts in real time, so that you no longer worry about WeChat article layout! As long as you know the basic Markdown grammar, you can create a WeChat picture and text with concise styles and beautiful appearance.
Note: It is recommended to use Chrome browser, the best results.
The existing open source WeChat Markdown editor has complex styles and does not meet my personal aesthetic needs. When I use them to type articles, I often have to make some changes myself, which is time-consuming and labor-intensive, so I started to do secondary development.
Friends are welcome to submit PR at any time to make this WeChat Markdown editor better! If you have new ideas, you are also welcome to feedback in the Discussions discussion area.
Note: The latest version of our project is developed based on Vue3. The old version based on Vue2 is no longer maintained. If you need the Vue2 version, please switch to the 1.x branch.
| # | Picture bed | Is it necessary to configure when using it | Remark |
|---|---|---|---|
| 1 | default | no | - |
| 2 | GitHub | Configure Repo and Token parameters | How to get GitHub token? |
| 3 | Alibaba Cloud | Configure AccessKey ID , AccessKey Secret , Bucket , Region parameters | How to use Alibaba Cloud OSS? |
| 4 | Tencent Cloud | Configure SecretId , SecretKey , Bucket , Region parameters | How to use Tencent Cloud COS? |
| 5 | Qiniu Cloud | Configure AccessKey , SecretKey , Bucket , Domain , Region parameters | How to use Qiniu Cloud Kodo? |
| 6 | MinIO | Configure Endpoint , Port , UseSSL , Bucket , AccessKey , SecretKey parameters | How to use MinIO? |
| 7 | Official account | Configure appID , appsecret ,代理域名parameters | How to get the official account developer ID password? |
| 8 | Cloudflare R2 | Configure AccountId , AccessKey , SecretKey , Bucket , Domain parameters | How to operate R2 using S3 API |
| 9 | Custom upload | yes | How to customize uploads? |
In the case where predefined graph beds are not provided on the tool, you only need to customize the upload logic, which is very useful for example when you are not convenient to use the public graph beds, but instead use your own upload service.
You only need to change the upload code in the given function. For convenience, this function provides some parameters that may be used:
Sample code:
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, // 上传失败调用的函数
// }If you have created an upload code for other third-party picture beds, you are very welcome to share it.
# 安装依赖
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/ Through our npm cli you can easily build your own WeChat Markdown editor.
# 安装
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 supports the following command line parameters:
port specifies the port number, default is 8800, and if occupied, a new port will be used randomly.spaceId dcloud service space configurationclientSecret dcloud service space configurationIf you are a Docker user, you can also use a command to start a fully private instance that belongs to you.
docker run -d -p 8080:80 doocs/md:latestAfter the container is running, open the browser and visit http://localhost:8080.
For more detailed information about Docker images in this project, you can follow https://github.com/doocs/docker-md
Note: If you use this Markdown editor for article layout and want to display your official account in this project README, please leave a message in #5.
