Os documentos de marcação são automaticamente renderizados como imagens e textos do WeChat em tempo real, para que você não se preocupe mais com o layout do artigo do WeChat! Desde que você conheça a gramática básica de Marydown, você pode criar uma imagem e texto do WeChat com estilos concisos e aparência bonita.
Nota: Recomenda -se usar o navegador Chrome, os melhores resultados.
O editor existente do WeChat Markdown tem estilos complexos e não atende às minhas necessidades estéticas pessoais. Quando os uso para digitar artigos, muitas vezes tenho que fazer algumas mudanças, o que consome tempo e intensiva em mão-de-obra, então comecei a fazer o desenvolvimento secundário.
Os amigos são convidados a enviar relações públicas a qualquer momento para melhorar este editor do WeChat Markdown! Se você tem novas idéias, também é bem -vindo ao feedback na área de discussão de discussões.
Nota: A versão mais recente do nosso projeto é desenvolvida com base no VUE3. A versão antiga baseada no VUE2 não é mais mantida. Se você precisar da versão VUE2, mude para a ramificação 1.x.
| # | Cama de imagem | É necessário configurar ao usá -lo | Observação |
|---|---|---|---|
| 1 | padrão | não | - |
| 2 | Github | Configurar parâmetros Repo e Token | Como obter o token do github? |
| 3 | Cloud Alibaba | Bucket AccessKey ID Region AccessKey Secret | Como usar o Alibaba Cloud OSS? |
| 4 | Tencent Cloud | Configurar parâmetros SecretId , SecretKey , Bucket , Region | Como usar o tencent nuvem cos? |
| 5 | Qiniu Cloud | Configurar AccessKey , SecretKey , Bucket , Domain , Parâmetros Region | Como usar o Qiniu Cloud Kodo? |
| 6 | Minio | Configurar Endpoint , Port , UseSSL , Bucket , AccessKey , parâmetros SecretKey | Como usar o Minio? |
| 7 | Conta oficial | Configurar parâmetros appID , appsecret ,代理域名 | Como obter a senha de ID do desenvolvedor de conta oficial? |
| 8 | Cloudflare R2 | Configurar parâmetros de AccountId , AccessKey , SecretKey , Bucket , Domain | Como operar R2 usando a API S3 |
| 9 | Upload personalizado | sim | Como personalizar uploads? |
No caso em que as camas de gráfico predefinidas não são fornecidas na ferramenta, você só precisa personalizar a lógica de upload, o que é muito útil, por exemplo, quando você não é conveniente para usar as camas de gráfico público, mas, em vez disso, use seu próprio serviço de upload.
Você só precisa alterar o código de upload na função fornecida. Por conveniência, esta função fornece alguns parâmetros que podem ser usados:
Código de exemplo:
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, // 上传失败调用的函数
// }Se você criou um código de upload para outras camas de terceiros, poderá compartilhá-lo.
# 安装依赖
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/ Através da nossa CLI da NPM, você pode construir facilmente seu próprio editor WeChat 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 suporta os seguintes parâmetros da linha de comando:
port especifica o número da porta, o padrão é 8800 e, se ocupado, uma nova porta será usada aleatoriamente.spaceId DcloudclientSecretSe você é um usuário do Docker, também pode usar um comando para iniciar uma instância totalmente privada que pertence a você.
docker run -d -p 8080:80 doocs/md:latestDepois que o contêiner estiver em execução, abra o navegador e visite http: // localhost: 8080.
Para informações mais detalhadas sobre as imagens do Docker neste projeto, você pode seguir https://github.com/doocs/docker-md
NOTA: Se você usar este editor de marcação para o layout do artigo e deseja exibir sua conta oficial neste projeto ReadMe, deixe uma mensagem no #5.