WeChat Markdown-Editor: einfache und effiziente WeChat-Grafik-Layout-Tools, ein Schlüssel zum Einfügen der Artikel auf der WeChat-öffentlichen Nummer

Allgemeine Einführung

WeChat Markdown Editor (WeChat Markdown Editor) ist ein sehr übersichtliches WeChat-Grafik-Layout-Tool, mit dem Benutzer leicht schöne WeChat-Posts erstellen können. Der Editor unterstützt alle grundlegenden Markdown-Syntaxen und bietet reichhaltige Funktionen wie mathematische Formeln, Mermaid-Diagramm-Rendering, Hervorhebung von Code-Blöcken, benutzerdefinierte Themenfarben und CSS-Stile, Hochladen mehrerer Bilder, Dateiimport und -export und vieles mehr. Benutzer müssen nur die grundlegenden Markdown-Syntax zu beherrschen, können Sie schnell zu generieren einfachen Stil, schönes Layout der WeChat Grafik Inhalt. Das Projekt basiert auf der Vue3-Entwicklung und bietet einen Online-Editor und Docker-Image-Bereitstellung, die bequem für die Benutzer zu bearbeiten und zu veröffentlichen, jederzeit und überall ist.

Online-EditorDirektzugriff Adresse des Online-Redakteurs vielleicht AusweichadresseWir empfehlen die Verwendung von Chrome für beste Ergebnisse.

Funktionsliste

• Unterstützt die gesamte grundlegende Syntax von Markdown
• Mathematische Formeln und Meerjungfrauen-Darstellung
• Reichhaltiges Thema zur Hervorhebung von Codeblöcken
• Benutzerdefinierte Themenfarben und CSS-Stile
• Funktion zum Hochladen mehrerer Bilder
• Datei-Import- und Exportfunktion
• Lokale Artikelverwaltung und automatische Speicherung von Entwürfen
• Unterstützung für mehrere Graphbed-Konfigurationen (z. B. GitHub, AliCloud, Tencent Cloud usw.)
• Docker-Image-Bereitstellung

Hilfe verwenden

Benutzerdefinierte Upload-Logik

In Fällen, in denen das Tool keine vordefinierten Betten zur Verfügung stellt, können Sie die Upload-Logik einfach anpassen. Das ist nützlich, wenn Sie beispielsweise keine öffentlichen Betten verwenden möchten und stattdessen Ihren eigenen Upload-Dienst nutzen.

Sie müssen lediglich den Upload-Code in der angegebenen Funktion ändern, die der Einfachheit halber einige Parameter enthält, die verwendet werden können:

Beispiel-Code:

const { file, util, okCb, errCb } = CUSTOM_ARG
const param = new FormData()
param.append(`Datei`, Datei)
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)
})
// Verfügbare übergebene Parameter.
// CUSTOM_ARG = {
// content, // base64 des hochzuladenden Bildes
// file, // das Dateiobjekt des hochzuladenden Bildes
// util: {
// axios, // eine Instanz von axios
// CryptoJS, // Krypto-Bibliothek
// OSS, // tiny-oss
// COS, // cos-js-sdk-v5
// Buffer, // buffer-from
// uuidv4, // uuid
// qiniu, // qiniu-js
// tokenTools, // einige Kodierungskonvertierungsfunktionen
// getDir, // Abfrage eines Verzeichnisses in Form von Jahr/Monat/Tag.
// getDateFilename, // Ermittelt den Dateinamen als Zeitstempel + uuid basierend auf dem Namen.
// }, // okCb: resolve, // okCb: resolve, // getDateFilename
// okCb: resolve, // Wichtig! Übergeben Sie nach einem erfolgreichen Upload einfach die URL an diesen Callback.
// errCb: reject, // die Funktion, die aufgerufen wird, wenn der Upload fehlgeschlagen ist.
// }

Wenn Sie einen Upload-Code erstellt haben, der für andere Grafikbetten von Drittanbietern funktioniert, können Sie ihn gerne weitergeben.

Wie man entwickelt und einsetzt

# Abhängigkeiten installieren
npm i

# startet den Entwicklungsmodus
npm starten

# wird im Verzeichnis /md bereitgestellt
npm run build
# Besuchen Sie http://127.0.0.1:9000/md

# wird im Stammverzeichnis bereitgestellt
npm run build:h5-netlify
# Besuchen Sie http://127.0.0.1:9000/

Rascher Aufbau privater Dienstleistungen

Weg 1. npm cli verwenden

[](https://github.com/doocs/md#-1--npm-cli )

Mit unserem npm-Cli können Sie ganz einfach Ihren eigenen WeChat Markdown-Editor erstellen.

#-Installation
npm i -g @doocs/md-cli

#-Startup
md-cli

# Zugang
öffnen http://127.0.0.1:8800/md/

#-Startup und Angabe des Ports
md-cli port=8899

# Zugang
öffnen Sie http://127.0.0.1:8899/md/

md-cli unterstützt die folgenden Befehlszeilenargumente:

• Hafen Geben Sie die Portnummer an, Standard ist 8800, wenn sie belegt ist, wird ein neuer Port nach dem Zufallsprinzip verwendet.
• spaceId dcloud-Dienstraum-Konfiguration
• clientSecret dcloud-Dienstraum-Konfiguration

Weg 2: Verwendung von Docker-Images

Wenn Sie ein Docker-Benutzer sind, können Sie auch eine vollständig eigene, privat betriebene Instanz direkt mit einem einzigen Befehl starten.

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

Sobald der Container betriebsbereit ist, öffnen Sie Ihren Browser und besuchen Sie http://localhost:8080.

Richtlinien für die Verwendung

1. grundlegende Bedienung::
   • Öffnen Sie den Online-Editor oder die lokale Instanz und rufen Sie den Bearbeitungsbildschirm auf.
   • Geben Sie die Markdown-Syntax im Bearbeitungsbereich ein und sehen Sie sich die Auswirkungen in Echtzeit an.
   • Verwenden Sie die Schaltflächen in der Symbolleiste für Formatierungen wie Fettdruck, Kursivschrift, Listen usw.
2. Erweiterte Funktionen::
   • FormelLaTeX-Syntax verwenden, um mathematische Formeln einzugeben, z. B. $E=mc^2$.
   • Nixen-KarteMermaid-Syntax eingeben, um Flussdiagramme, Sequenzdiagramme usw. zu erstellen:

    Diagramm TD.
   A-->B.
   A-->C; B-->D; A-->B; B-->D; B-->D; B-->D
   B-->D; C-->D; C-->D; C-->D; C-->D; C-->D
   C-->D.
   

   • Code-Block-HervorhebungErstellen von Codeblöcken mit dreifachen Anführungszeichen und dem Namen der Sprache, z.B.:

    def hello_world().
   print("Hallo, Welt!")
   

   • Benutzerdefinierte StileHinzufügen von benutzerdefinierten CSS-Stilen in den Einstellungen, um das Erscheinungsbild von Beiträgen anzupassen.
   • Hochladen mehrerer BilderKlicken Sie auf die Schaltfläche Bild in der Symbolleiste, um mehrere Bilder zum Hochladen auszuwählen und das Bildbett zu konfigurieren.
   • Dateiimport und -exportBequemes Verwalten von Artikeldateien mit der Import- und Exportfunktion im Menü Datei.
3. Karte Bettkonfiguration::
   • GitHub TupeloKonfigurieren Sie den Repo und Token Parameter, siehe die GitHub-Dokumentation für detaillierte Schritte.
   • Aliyun OSSKonfigurieren Sie die Parameter AccessKey ID, AccessKey Secret, Bucket und Region, siehe die AliCloud-Dokumentation für detaillierte Schritte.
   • Tencent Cloud COSKonfigurieren Sie die Parameter SecretId, SecretKey, Bucket und Region, siehe Tencent Cloud Dokumentation für detaillierte Schritte.
   • Andere grafische BettenKonfigurieren Sie bei Bedarf andere Graphbetten wie Seven Bulls Cloud, MinIO, Cloudflare R2 usw.

caveat

• Einige Browser-Plugins können den Stil des Artikels beeinträchtigen, es wird empfohlen, den Editor im Plugin-freien Modus zu verwenden.
• Wenn Sie auf fehlende Stile oder Rendering-Probleme stoßen, können Sie im GitHub-Diskussionsforum des Projekts nachlesen oder Feedback zu dem Problem einreichen.

Mit den oben genannten Schritten können Benutzer leicht mit dem WeChat Markdown Editor beginnen und schnell hochwertige WeChat-Grafikinhalte erstellen und veröffentlichen.