WeChat Markdown editor: herramientas de diseño gráfico de WeChat sencillas y eficaces, una llave para pegar el artículo al número público de WeChat.

Introducción general

WeChat Markdown Editor (Editor Markdown de WeChat) es una herramienta de diseño gráfico de WeChat muy concisa diseñada para ayudar a los usuarios a crear fácilmente hermosas publicaciones de WeChat. El editor es compatible con toda la sintaxis básica de Markdown y ofrece ricas funciones como fórmulas matemáticas, representación de gráficos Mermaid, resaltado de bloques de código, colores de tema y estilos CSS personalizados, carga de varias imágenes, importación y exportación de archivos y mucho más. Los usuarios sólo tienen que dominar la sintaxis básica de Markdown, puede generar rápidamente un estilo simple, hermoso diseño del contenido gráfico WeChat. El proyecto se basa en el desarrollo Vue3, proporcionando editor en línea y el despliegue de imágenes Docker, que es conveniente para los usuarios editar y publicar en cualquier momento y en cualquier lugar.

Editor en líneaAcceso directo Dirección del editor en línea tal vez dirección alternativaRecomendamos utilizar Chrome para obtener mejores resultados.

Lista de funciones

• Soporta toda la sintaxis básica de Markdown
• Fórmulas matemáticas y representación de gráficos de sirenas
• Tema de resaltado de bloques de código enriquecido
• Colores y estilos CSS personalizados
• Función de carga de varias imágenes
• Función de importación y exportación de archivos
• Gestión local de artículos y guardado automático de borradores
• Compatibilidad con múltiples configuraciones de lechos gráficos (por ejemplo, GitHub, AliCloud, Tencent Cloud, etc.)
• Despliegue de imágenes Docker

Utilizar la ayuda

Lógica de carga personalizada

En los casos en que la herramienta no ofrece camas predefinidas, basta con personalizar la lógica de carga, lo que resulta útil si, por ejemplo, no se siente cómodo con las camas públicas y en su lugar utiliza su propio servicio de carga.

Sólo tiene que cambiar el código de carga en la función dada, que para mayor comodidad proporciona algunos parámetros que se pueden utilizar:

Código de ejemplo:

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, // 上传失败调用的函数
// }

Si has creado un código de carga que funciona con otras camas gráficas de terceros, eres más que bienvenido a compartirlo.

Cómo desarrollar e implantar

# 安装依赖
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/

Construir rápidamente servicios privados

Forma 1. Utilizar npm cli

Con nuestro cli npm puedes construir fácilmente tu propio editor Markdown de WeChat.

# 安装
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 admite los siguientes argumentos de línea de comandos:

• port Especifique el número de puerto, por defecto es 8800, si está ocupado, se utilizará un nuevo puerto aleatoriamente.
• spaceId Configuración del espacio de servicio dcloud
• clientSecret Configuración del espacio de servicio dcloud

Forma 2. Utilizar imágenes Docker

Si eres usuario de Docker, también puedes iniciar una instancia de ejecución privada directamente con un solo comando.

docker run -d -p 8080:80 doocs/md:latest

Una vez que el contenedor esté en funcionamiento, abra su navegador y visite http://localhost:8080.

Normas de uso

1. funcionamiento básico::
   • Abra el editor en línea o la instancia local y vaya a la pantalla de edición.
   • Introduzca la sintaxis Markdown en el área de edición y previsualice el efecto en tiempo real.
   • Utilice los botones de la barra de herramientas para dar formato, como negrita, cursiva, listas, etc.
2. Funciones avanzadas::
   • fórmulaUtilice la sintaxis LaTeX para introducir fórmulas matemáticas, como $E=mc^2$.
   • Cuadro de sirenas: Introduzca la sintaxis de Mermaid para crear diagramas de flujo, diagramas de secuencia, etc., como:

    graph TD;
   A-->B;
   A-->C;
   B-->D;
   C-->D;
   

   • Resaltado de bloques de código: Crea bloques de código utilizando comillas triples más el nombre del lenguaje, p. ej:

    def hello_world():
   print("Hello, world!")
   

   • Estilos personalizados: Añade estilos CSS personalizados en Configuración para ajustar la apariencia de las entradas.
   • Carga de varias imágenesHaga clic en el botón Imagen de la barra de herramientas para seleccionar varias imágenes para cargar y configurar el lecho de imágenes.
   • Importación y exportación de archivos: Gestione cómodamente los archivos de artículos mediante la función de importación y exportación del menú Archivo.
3. Mapa de configuración de camas::
   • GitHub Tupelo: Configure el Repo y Ficha consulte la documentación de GitHub para obtener información detallada.
   • Aliyun OSSConfigure los parámetros AccessKey ID, AccessKey Secret, Bucket y Region, consulte la documentación de AliCloud para ver los pasos detallados.
   • Nube COS de TencentConfigure los parámetros SecretId, SecretKey, Bucket y Region, consulte la documentación de Tencent Cloud para conocer los pasos detallados.
   • Otras camas gráficasConfigure otras camas gráficas como Seven Bulls Cloud, MinIO, Cloudflare R2, etc. según sea necesario.

advertencia

• Algunos plugins del navegador pueden afectar al estilo del artículo, se recomienda utilizar el editor en modo libre de plugins.
• Si se encuentra con estilos que faltan o problemas de renderizado, puede consultar el foro de debate de GitHub del proyecto o enviar sus comentarios sobre el problema.

Con los pasos anteriores, los usuarios pueden empezar a utilizar fácilmente el editor Markdown de WeChat y crear y publicar rápidamente contenido gráfico de WeChat de alta calidad.