トリッキーな WeChat パブリックアカウントエディター-WeChatの開発-php.cn

トリッキーな WeChat パブリックアカウントエディター

関連する学習の推奨事項: WeChat パブリックアカウント開発チュートリアル

2019 AD では、WeChat パブリックアカウントの植字機能運営者からは常に批判されており、Xium や 135 Editor などのツールは一派に分かれています。

しかし、それが WeChat のネイティブツールであれ、他のエディタであれ、クリエイターは限られたクリエイティブな経験をレイアウトデザインにまで広げなければなりません。

Markdown 写植の問題を解決する万能薬が誕生しました。

1. はじめに

1.1 マークダウンとは何ですか?

Markdown は、最小限の入力方法と学習コストが非常に低い植字構文です。

タイトル、引用符、太字、リンク、画像、コードスニペット、数式、テキスト作成に必要なその他の形式が豊富に含まれています。

これを使用すると、形式に邪魔されずにコンテンツ自体に集中できるようになります。

1.2 WeChat 公開アカウントと統合するにはどうすればよいですか?

このような優れた書式設定構文は、WeChat 公開アカウントではサポートされていません。＃＃＃＃＃＃＃＃＃＃＃＃心配しないで！ Markdown Nice は問題の解決をお手伝いします。

1.3 Markdown Nice とは何ですか?
オープンソースのMarkdownエディターで、書き込み後は組版が成功し、コピーしてWeChat公式アカウントに貼り付けることができます。＃＃＃＃＃＃＃＃＃だから何？それだけですか？＃＃＃＃＃＃＃＃＃＃＃＃もちろん違います！素敵な赤ちゃん、他にどんな特徴がありますか？

図ベッド、脚注、コード、数式をサポート

8 種類のレイアウトテーマと 7 種類のレイアウトをサポートコードテーマはカスタムスタイルをサポートしており、テーマを送信して人々に賞賛してもらうことができます

#こんなに優れた特徴が目の前にあるのに、あなたは何ですか待っていますか？
アドレス: https://mdnice.com

あなたがまだ読んでいるとは思いませんでした

ああ、、、

ドン過小評価しないでください。パブリックアカウントの植字に Markdown を使用できるようにするために、現在の結果に達するまで、半年ほど WeChat パブリックアカウントエディターと格闘しました。

私の戦い方を聞きたいですか?言いたいことは言わせてください！

2.1 戦いのプロローグ

WeChat パブリックアカウントエディターは、Baidu FEX フロントエンドチームのオープンソース ueditor プロジェクトに由来しており、これは、次に示すように、Web ページのコードを盗むことによって私によって発見されました。写真内:

ueditor はリッチテキストエディターなので、これから直面するのは

markdown-> の変換合戦です。 ;リッチテキスト

, オープンソースやソフトウェアの世界には、この変換合戦の優れた実装が数多くあります。例:

Web 側: editor.md、mavonEditor

CSS スタイル

をリッチテキストに統合し、WeChat エディターや他の主要な国内プラットフォームのリッチテキストエディターにも適応します。では、この問題を解決するツールはあるのでしょうか?実際には、次のようなものがあります:

Web 側: md2all、wechat-format
ブラウザプラグイン: markdown-here

しかし上記のツールそれぞれに欠点があるので、私はこの機会を見つけて、すべての欠点を解決するために自分の素敵な赤ちゃんを産みました！

Markdown Nice は、次のような多くのオープンソーステクノロジで構成されるオープンソースプロジェクトです。

React: Facebook のオープンソース JS ビューレイヤーフレームワーク
markdown-it: マークダウン変換リッチテキストパーサー
juice: CSS クラスセレクターをインラインスタイルに変換するツール
codemirror: Web コードエディター
ant-design: React UI コンポーネントライブラリ
mobx: 状態管理ライブラリ
highlight.js: コードハイライトライブラリ
MathJax-node: 画像ライブラリへの数式
axios、ali-oss、qiniu-js など

注: 上記のオープンソースの一部については、以下で説明します。 , オープンソースライブラリの具体的な機能については、こちらをご参照ください。

上記のテクノロジーを手に入れた後、私は WeChat 編集者に宣戦布告し、戦いの第一弾を発射しました。

2.2 戦いの最初のショット: コードテーマ

WeChat 公開アカウントは、2018 年以前はコードブロックをまったくサポートしていませんでした。現在のサポートも非常に単一であり、コードフォントが大きいという問題があります。

WeChat パブリックアカウントエディターの開発者が、コードブロックがプログラマーコミュニティにとってどれほど重要であるかについて考えたこともなかったというのは非常に腹立たしいです? ?

このため、問題の解決に役立つアーティファクトを強調表示する highlight.js コードを見つけました。単一コードのテーマの質問です。

一定の審査を経て、atom-one-dark、atom-one-light、monikai、GitHub、vs2015、xcode、WeChat コードテーマを含む合計 7 つのコードスタイルが選択され、誰もが選択できるようになりました。

WeChat コードテーマは highlight.js のカテゴリに属していないため、その構造は WeChat パブリックアカウントエディターのソースコードから取得する必要があります。次の 2 つの図は、その方法を示しています。それを取得します:

そして

highlight.js と markdown-it パーサーは組み合わせて使用されるため、ツールには 2 つのマークダウンパーサーがあり、それぞれ WeChat コードテーマとその他のコードテーマを解析するために使用されます。ソースコードリファレンス。

上記の問題に加えて、多くの技術的なパブリックアカウントコードには次のような問題があります。

コード行が長すぎるために発生する複数行表示の問題。

この問題は、次の CSS コードを使用して解決できます:

pre code {display: -webkit-box !important}复制代码

ログイン後にコピー

比較の結果は図に示すとおりです:

2.3 戦闘の 2 番目のショット: 画像のアップロード

写真なしで優れた記事が成り立つでしょうか?

(何人かの技術スタッフは「私は持っていない」と言いました)

画像管理はあらゆるものにとって重要です。成熟したエディタの問題が発生する可能性があります。

ナイスベイビーは、大手企業が運営管理するSM.MSイメージベッドを初めて使用しました。ありがとうございます!

この画像ベッドを使用して画像をアップロードすることはできますが、画像を WeChat エディターに貼り付けるときは、次のように失敗率が非常に高くなります (

WeChat エディターを踏みにじって死にたいです

)。写真内:

上記の問題を解決するために、Markdown Nice では、Alibaba Cloud および Qiniu Cloud のカスタマイズされたイメージベッドを順次サポートしており、Alibaba Cloud および Qiniu Cloud のサービスを購入することで、独自に構築したイメージベッドを使用することができます。＃＃＃＃＃＃＃＃＃しかし！ユーザーが自分で設定できるようにする設定ドキュメントはありますが、設定プロセス全体が非常に複雑で悲惨です。