WeChat Markdownエディタ：シンプルで効率的なWeChatグラフィックレイアウトツール、WeChat公開番号に記事を貼り付けるためのキー

はじめに

WeChat Markdown Editor (WeChat Markdown Editor)は、ユーザーが簡単に美しいWeChat投稿を作成できるように設計された、非常に簡潔なWeChatグラフィックレイアウトツールです。このエディタは、すべての基本的なMarkdown構文をサポートし、数式、マーメイドチャートレンダリング、コードブロックハイライト、カスタムテーマカラーとCSSスタイル、マルチイメージアップロード、ファイルのインポートとエクスポートなどの豊富な機能を提供します。ユーザーは基本的なMarkdown構文をマスターするだけで、WeChatグラフィックコンテンツのシンプルなスタイル、美しいレイアウトを素早く生成することができます。このプロジェクトはVue3開発に基づいており、オンラインエディターとDockerイメージデプロイメントを提供します。

オンラインエディターダイレクト・アクセス オンライン・エディターのアドレス もしかしたら 代替アドレス最良の結果を得るためには、Chromeの使用をお勧めします。

機能一覧

• Markdownの基本構文をすべてサポート
• 数式とマーメイド・チャートのレンダリング
• リッチコードブロックハイライトテーマ
• カスタムテーマカラーとCSSスタイル
• 複数画像のアップロード機能
• ファイルのインポートとエクスポート機能
• ローカル記事の管理と下書きの自動保存
• 複数のグラフベッド構成をサポート（GitHub、AliCloud、Tencent Cloudなど）
• Dockerイメージのデプロイ

ヘルプの使用

カスタムアップロードロジック

このツールがあらかじめ定義されたベッドを提供していない場合は、アップロードロジックをカスタマイズするだけでよい。

与えられた関数のアップロードコードを変更するだけでよく、便宜上、使用可能なパラメータがいくつか用意されている：

サンプルコード：

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, // アップロードする画像のファイルオブジェクト
// util: { // axios, // axiosのインスタンス。
// 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, // okCb: resolve, // getDateFilename
// okCb: resolve, // 重要！アップロードに成功したら、このコールバックにURLを渡してください。
// errCb: reject, // アップロードに失敗した場合に呼び出す関数。
// }

他のサードパーティ製グラフィックベッドで動作するアップロードコードを作成した場合は、ぜひ共有してください。

開発と配備の方法

# 依存関係のインストール
npm i

#の開発モードを開始する
npm スタート

#が/mdディレクトリにデプロイされる
npm run build
#はhttp://127.0.0.1:9000/md。

#はルートディレクトリにデプロイされる
npm run build:h5-netlify
# http://127.0.0.1:9000/ をご覧ください。

民間サービスの迅速な構築

方法1. npm cliを使う

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

私たちのnpm cliを使用すると、簡単に独自のWeChat Markdownエディタを構築することができます。

#のインストール
npm i -g @doocs/md-cli

#の起動
md-cli

# アクセス
http://127.0.0.1:8800/md/ を開く

#の起動とポートの指定
md-cli port=8899

#アクセス
http://127.0.0.1:8899/md/ を開く

md-cliは以下のコマンドライン引数をサポートしている：

• ポート ポート番号を指定する。デフォルトは8800で、埋まっている場合は新しいポートがランダムに使用される。
• スペースID dcloudサービススペースの構成
• クライアント・シークレット dcloudサービススペースの構成

方法2.Dockerイメージを使う

Dockerユーザーであれば、コマンド1つで完全所有の非公開インスタンスを直接起動することもできる。

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

コンテナが起動したら、ブラウザを開いてhttp://localhost:8080。

使用ガイドライン

1. 基本操作::
   • オンラインエディターまたはローカルインスタンスを開き、編集画面に移動します。
   • 編集エリアにMarkdown構文を入力し、リアルタイムで効果をプレビュー。
   • 太字、斜体、リストなどの書式設定には、ツールバーのボタンを使用します。
2. 高度な機能::
   • フォーミュラ数式を入力するには、LaTeX構文を使用します。 $E=mc^2$.
   • マーメイド・チャートフローチャートやシーケンス図などを作成するには、Mermaidの構文を入力します：

    グラフ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.
   

   • コードブロックのハイライトトリプルクォートと言語名を使ってコードブロックを作成する：

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

   • カスタムスタイル設定にカスタムCSSスタイルを追加して、投稿の見た目を調整できます。
   • 複数画像のアップロードツールバーの画像ボタンをクリックして、アップロードする画像を複数選択し、画像ベッドを設定します。
   • ファイルのインポートとエクスポートファイルメニューのインポート・エクスポート機能で、記事ファイルを便利に管理。
3. マップベッド構成::
   • ギットハブ・テューペロレポの設定と トークン パラメーターの詳細な手順については、GitHubのドキュメントを参照してください。
   • アリユンOSSAccessKey ID、AccessKey Secret、Bucket、Regionの各パラメータを設定します。
   • テンセント・クラウドCOSSecretId、SecretKey、Bucket、Regionのパラメータを設定する。
   • その他のグラフィックベッド必要に応じて、セブンブルズクラウド、MinIO、Cloudflare R2など、その他のグラフベッドを設定する。

ほら

• いくつかのブラウザのプラグインは記事のスタイルに影響を与える可能性があります、プラグインフリーモードでエディタを使用することをお勧めします。
• スタイルの欠落やレンダリングの問題が発生した場合は、プロジェクトのGitHubディスカッションフォーラムを参照するか、問題についてフィードバックを送信することができます。

以上のステップにより、ユーザーはWeChat Markdown Editorを簡単に使い始めることができ、高品質のWeChatグラフィックコンテンツを素早く作成して公開することができます。