Editeur WeChat Markdown : outils de mise en page graphique WeChat simples et efficaces, une clé pour coller l'article au numéro public WeChat

Introduction générale

WeChat Markdown Editor (WeChat Markdown Editor) est un outil de mise en page graphique WeChat très concis, conçu pour aider les utilisateurs à créer facilement de beaux messages WeChat. L'éditeur prend en charge toutes les syntaxes Markdown de base et offre de riches fonctionnalités telles que les formules mathématiques, le rendu des graphiques Mermaid, la mise en évidence des blocs de code, la personnalisation des couleurs du thème et des styles CSS, le téléchargement de plusieurs images, l'importation et l'exportation de fichiers, et bien d'autres encore. Les utilisateurs n'ont qu'à maîtriser la syntaxe Markdown de base, vous pouvez rapidement générer un style simple, une belle mise en page du contenu graphique WeChat. Le projet est basé sur le développement Vue3, fournissant un éditeur en ligne et un déploiement d'image Docker, ce qui est pratique pour les utilisateurs d'éditer et de publier à tout moment et n'importe où.

Éditeur en ligneAccès direct Adresse de l'éditeur en ligne peut-être autre adresseNous recommandons d'utiliser Chrome pour obtenir les meilleurs résultats.

Liste des fonctions

• Prise en charge de toutes les syntaxes de base de Markdown
• Formules mathématiques et rendu du diagramme de la sirène
• Thème de mise en évidence des blocs de code riches
• Couleurs du thème et styles CSS personnalisés
• Fonction de téléchargement d'images multiples
• Fonction d'importation et d'exportation de fichiers
• Gestion locale des articles et sauvegarde automatique des brouillons
• Prise en charge de plusieurs configurations de lits de graphes (par exemple GitHub, AliCloud, Tencent Cloud, etc.)
• Déploiement d'une image Docker

Utiliser l'aide

Logique de téléchargement personnalisée

Dans les cas où l'outil ne fournit pas de lits prédéfinis, vous pouvez simplement personnaliser la logique de téléchargement, ce qui est utile si, par exemple, vous n'êtes pas à l'aise avec les lits publics et que vous utilisez plutôt votre propre service de téléchargement.

Il suffit de modifier le code de téléchargement dans la fonction donnée, qui, pour des raisons de commodité, fournit quelques paramètres qui peuvent être utilisés :

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

Si vous avez créé un code de téléchargement qui fonctionne pour d'autres lits graphiques tiers, n'hésitez pas à le partager.

Comment développer et déployer

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

Créer rapidement des services privés

Méthode 1 : Utiliser npm cli

Avec notre client npm, vous pouvez facilement créer votre propre éditeur 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 prend en charge les arguments de ligne de commande suivants :

• port Spécifier le numéro de port, par défaut 8800, s'il est occupé, un nouveau port sera utilisé de manière aléatoire.
• spaceId Configuration de l'espace de service dcloud
• clientSecret Configuration de l'espace de service dcloud

Méthode 2 : Utilisation d'images Docker

Si vous utilisez Docker, vous pouvez également démarrer une instance privée en toute propriété directement à l'aide d'une seule commande.

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

Une fois que le conteneur est opérationnel, ouvrez votre navigateur et visitez http://localhost:8080.

Lignes directrices pour l'utilisation

1. fonctionnement de base: :
   • Ouvrez l'éditeur en ligne ou l'instance locale et accédez à l'écran d'édition.
   • Saisissez la syntaxe Markdown dans la zone d'édition et prévisualisez l'effet en temps réel.
   • Utilisez les boutons de la barre d'outils pour la mise en forme (gras, italique, listes, etc.).
2. Fonctionnalités avancées: :
   • formule: Utiliser la syntaxe LaTeX pour saisir des formules mathématiques, telles que $E=mc^2$.
   • Tableau des sirènesLes diagrammes de séquence : Entrez la syntaxe Mermaid pour créer des organigrammes, des diagrammes de séquence, etc :

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

   • Mise en évidence des blocs de codeLes blocs de code : Créez des blocs de code en utilisant des guillemets triples plus le nom du langage, par exemple :

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

   • Styles personnalisésLes articles peuvent être affichés sur le site web de l'entreprise ou sur le site web d'un tiers.
   • Téléchargement de plusieurs imagesCliquez sur le bouton Image dans la barre d'outils pour sélectionner plusieurs images à télécharger et configurer le lit d'images.
   • Importation et exportation de fichiersGestion des fichiers d'articles : Gérez facilement les fichiers d'articles à l'aide de la fonction d'importation et d'exportation du menu Fichier.
3. Configuration du lit de carte: :
   • GitHub Tupelo: Configurer le Repo et le Jeton voir la documentation GitHub pour les étapes détaillées.
   • Aliyun OSSPour plus de détails, voir la documentation d'AliCloud.
   • Tencent Cloud COSSecretId : Configurer les paramètres SecretId, SecretKey, Bucket et Region, voir la documentation de Tencent Cloud pour les étapes détaillées.
   • Autres lits graphiquesLes autres lits graphiques tels que Seven Bulls Cloud, MinIO, Cloudflare R2, etc. sont configurés en fonction des besoins.

mise en garde

• Certains plugins de navigateur peuvent affecter le style de l'article. Il est recommandé d'utiliser l'éditeur en mode sans plugin.
• Si vous rencontrez des styles manquants ou des problèmes de rendu, vous pouvez vous référer au forum de discussion GitHub du projet ou soumettre des commentaires sur le problème.

Avec les étapes ci-dessus, les utilisateurs peuvent facilement commencer à utiliser l'éditeur Markdown de WeChat et créer et publier rapidement du contenu graphique WeChat de haute qualité.