This issue recommends an open source wechat document Markdown editor – MD.
Markdown automatic instant rendering of documents to wechat graphics, so that you no longer worry about wechat article layout! As long as you know the basic Markdown grammar, you can make a concise and beautiful wechat text.
Features
-
- Support for custom CSS styles
- Support for all basic Markdown syntax
- Supports both light and dark theme modes
- Support Ctrl + F fast formatting of documents
- Support color palette, quickly replace the overall tone of the article
- Support multi-picture upload, can customize the configuration chart bed
- Support custom upload logic
- Support the function TAB
by right clicking in the edit box
- Supports batch conversion of local images to online images
Supported chart bed
Chart bed |
Whether to configure |
GitHub |
Set Repo and Token parameters |
Alibaba Cloud |
Configure AccessKey ID, AccessKey Secret, Bucket, and Region parameters |
Tencent Cloud |
Set parameters of SecretId, SecretKey, Bucket, and Region |
Seven Niuyun |
Set parameters of AccessKey, SecretKey, Bucket, Domain, and Region |
MinIO |
Set parameters to Endpoint, Port, UseSSL, Bucket, AccessKey, and SecretKey |
Custom upload |
Yes |
Custom upload logic
In cases where no predefined chart bed is provided on the tool, you only need to customize the upload logic, which is very useful for example if you are not convenient to use a public chart bed, but use your own upload service.
You only need to change the upload code in the given function, which provides some possible parameters for convenience:
Example code:
const { file, util, okCb, errCb } = CUSTOM_ARG;
const param = new FormData();
param.append("file", file);
util.axios
.post (< span class = "HLJS - string" > < / span > "http://127.0.0.1:9000/upload", param, {
headers: { "Content-Type": "multipart/form-data" },
})
.then((res) => {
okCb(res.url);
})
.catch((err) => {
errCb(err);
});
// Available parameters provided :
// CUSTOM_ARG = {
// content, // base64 of the image to be uploaded
// file, // file object of the image to be uploaded
// util: {
// axios, // axios instance
// CryptoJS, // cryptojs,
// OSS, // ali-oss
// COS, // cos-js-sdk-v5
// Buffer, // buffer-from
// uuidv4, // uuid
// qiniu, // qiniu-js
// tokenTools, // some encoding conversion function
// getDir, // Get the directory in the form of year/month/day
// getDateFilename, // Get it from the file name in the form of a timestamp +uuid
// },
// okCb: resolve, // Important! After successful upload to this callback url can be passed
// errCb: reject, // Upload failed call function
// }
Quickly build private services
Method 1: Use the npm cli
You can easily build your own wechat Markdown editor through our npm cli.
# Install
npm i -g @doocs/md-cli
# Start
md-cli
# Access
Open http://127.0.0.1:8800/md/
# Start and specify port
md-cli port=8899
# Access
Open http://127.0.0.1:8899/md/ < / code > < / pre >
md-cli supports the following command line parameters:
-
- port Specifies the port number. The default port number is 8800. If the port is occupied, a new port is randomly used.
-
- spaceId dcloud service space configuration
-
- clientSecret dcloud Service Space Configuration
Method 2: Using Docker image
If you are a Docker user, you can also use a command directly to launch your own, privately-run instance.
docker run -d -p 8080:80 doocs/md:latest
Once the container is running, open your browser and visit http://localhost:8080.
Function demonstration
Note:
If you use some browser scripts to modify the background color of the web page, it may cause the phenomenon of background color blocking in the rendered article, see:
https://github.com/doocs/md/issues/63.
Some browser plugins cause damage to the article style. The phenomenon is: copy and paste to the background article of the public number, click to save, the style is lost, see:
https://github.com/doocs/md/issues/151.
—END—
Open Source protocol: WTFPL
Online editor:
https://doocs.github.io/md/