Markdownドキュメントは、WeChatの写真やテキストとしてリアルタイムで自動的にレンダリングされるため、WeChatの記事レイアウトについては心配しなくなります。基本的なマークダウングラマーを知っている限り、簡潔なスタイルと美しい外観のWeChat画像とテキストを作成できます。
注:Chromeブラウザを使用することをお勧めします。これは、最良の結果です。
既存のオープンソースWechat Markdownエディターは複雑なスタイルを備えており、私の個人的な美的ニーズを満たしていません。それらを使用して記事を入力するとき、私はしばしば自分でいくつかの変更を加える必要があります。これは時間がかかり、労働集約的であるため、二次開発を始めました。
友達はいつでもPRを提出して、このWeChat Markdownエディターをより良くすることができます!新しいアイデアがある場合は、ディスカッションディスカッション領域でフィードバックすることもできます。
注:プロジェクトの最新バージョンは、VUE3に基づいて開発されています。 VUE2に基づく古いバージョンは維持されなくなりました。 VUE2バージョンが必要な場合は、1.Xブランチに切り替えてください。
| # | 写真ベッド | 使用するときに構成する必要がありますか? | 述べる |
|---|---|---|---|
| 1 | デフォルト | いいえ | - |
| 2 | github | RepoとTokenパラメーターを構成します | Githubトークンを入手する方法は? |
| 3 | アリババクラウド | AccessKey ID 、 AccessKey Secret 、 Bucket 、 Regionパラメーターの構成 | Alibaba Cloud OSSの使用方法は? |
| 4 | テンセントクラウド | SecretId 、 SecretKey 、 Bucket 、 Regionパラメーターを構成します | Tencent Cloud Cosの使用方法は? |
| 5 | Qiniuクラウド | AccessKey 、 SecretKey 、 Bucket 、 Domain 、 Regionパラメーターを構成 | Qiniu Cloud Kodoの使用方法は? |
| 6 | ミニオ | Endpoint 、 Port 、 UseSSL 、 Bucket 、 AccessKey 、およびSecretKeyパラメーターを構成する | ミニオの使い方は? |
| 7 | 公式アカウント | appID 、 appsecret 、代理域名パラメーターを構成します | 公式アカウント開発者IDパスワードを取得する方法は? |
| 8 | CloudFlare R2 | AccountId 、 AccessKey 、 SecretKey 、 Bucket 、 Domainパラメーターを構成する | S3 APIを使用してR2を操作する方法 |
| 9 | カスタムアップロード | はい | アップロードをカスタマイズする方法は? |
事前定義されたグラフベッドがツールに提供されていない場合、アップロードロジックをカスタマイズするだけです。たとえば、パブリックグラフベッドを使用するのに便利ではなく、代わりに独自のアップロードサービスを使用する場合に非常に便利です。
指定された関数のアップロードコードを変更するだけです。便利なため、この関数は使用できるいくつかのパラメーターを提供します。
サンプルコード:
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, // 上传失败调用的函数
// }他のサードパーティの画像ベッドのアップロードコードを作成した場合は、共有できます。
# 安装依赖
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/ NPM CLIを通じて、独自の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は、次のコマンドラインパラメーターをサポートしています。
portポート番号を指定し、デフォルトは8800であり、占有されている場合、新しいポートがランダムに使用されます。spaceId DCloudサービススペース構成clientSecret dcloudサービススペース構成Dockerユーザーの場合は、コマンドを使用して、自分に属する完全なプライベートインスタンスを開始することもできます。
docker run -d -p 8080:80 doocs/md:latestコンテナが実行されたら、ブラウザを開き、http:// localhost:8080にアクセスします。
このプロジェクトのDocker画像の詳細については、https://github.com/doocs/docker-mdに従うことができます。
注:このマークダウンエディターを記事レイアウトに使用し、このプロジェクトREADMEに公式アカウントを表示したい場合は、#5にメッセージを残してください。