棘手的微信公眾號(hào)編輯器

相關(guān)學(xué)習(xí)推薦：微信公眾號(hào)開發(fā)教程

公元 2019 年，微信公眾號(hào)排版能力孱弱，始終為運(yùn)營者所詬病，秀米、135 編輯器等工具割據(jù)一方。

但無論是微信原生工具，還是其他編輯器，都讓創(chuàng)作者不得不將有限的創(chuàng)作經(jīng)歷分散到排版設(shè)計(jì)上。

Markdown 解決排版的靈丹妙藥，應(yīng)運(yùn)而生。

一、引子

1.1 Markdown 是什么？

Markdown 是一種排版語法，擁有極簡(jiǎn)的輸入方式和極低的學(xué)習(xí)成本。

富含了標(biāo)題、引用、加粗、鏈接、圖片、代碼段、公式等一切在文字創(chuàng)作中需要的排版格式。

擁有它，讓人專注于內(nèi)容本身，而不被格式所打擾。

1.2 怎么和微信公眾號(hào)結(jié)合？

這么優(yōu)秀的排版語法，可是微信公眾號(hào)也不支持呀。

別急！Markdown Nice 來幫你解決問題！

1.3 Markdown Nice 是什么？

一款開源 Markdown 編輯器，寫完后即排版成功，復(fù)制即可粘貼到微信公眾號(hào)。

So what？ 只有這點(diǎn)么？

當(dāng)然不是！Nice寶寶你還有什么特性呀？

• 支持圖床、腳注、代碼、公式
• 支持 8 種排版主題和 7 種代碼主題
• 支持自定義樣式，可提交主題供人瞻仰
• 除了公眾號(hào)外，還支持知乎、掘金、博客園和CSDN等平臺(tái)
• 我顏值高呀

這么多優(yōu)秀的特性擺在你面前，還在等什么？

地址：https://mdnice.com

快讓你的微信排版 Nice 起來！

二、正文

沒想到你還在看

咳咳、、、

不要小看Nice寶寶我，為了能夠使用 Markdown 進(jìn)行公眾號(hào)排版，我可是和微信公眾號(hào)編輯器做了半年的斗爭(zhēng)，才贏得了現(xiàn)在的戰(zhàn)果！

想聽聽我是如何戰(zhàn)斗的？下面且聽我娓娓道來！

2.1 戰(zhàn)斗序章

微信公眾號(hào)編輯器源于百度 FEX 前端團(tuán)隊(duì)的開源的 ueditor 項(xiàng)目，這可是寶寶我扒取了網(wǎng)頁代碼發(fā)現(xiàn)的，如圖所示：

因?yàn)?ueditor 是富文本編輯器，所以我即將面臨的是 markdown->富文本 的轉(zhuǎn)換戰(zhàn)役，在開源界或者軟件界這種轉(zhuǎn)換戰(zhàn)役有了相當(dāng)多的優(yōu)秀實(shí)現(xiàn)。比如：

• Web端：editor.md、mavonEditor
• PC端：typora、MWeb

但是上述工具都存在一個(gè)問題，沒有很好地將 CSS 樣式融入富文本中，進(jìn)而適配微信編輯器，以至于國內(nèi)其他各大平臺(tái)的富文本編輯器。

那么有沒有嘗試彌補(bǔ)這一問題的工具呢？其實(shí)是有的：

• Web端：md2all、wechat-format
• 瀏覽器插件：markdown-here

但是上述工具也各自有不完美的地方，于是Nice寶寶我發(fā)現(xiàn)了這個(gè)契機(jī)，把自己生產(chǎn)了出來，解決一切不完美！

Markdown Nice 是一個(gè)開源項(xiàng)目，由很多開源技術(shù)合體而成，其中主要包括：

• React：facebook 開源的 js 視圖層框架
• markdown-it：markdown 轉(zhuǎn)換富文本解析器
• juice：將 CSS 類選擇器轉(zhuǎn)換為行內(nèi)樣式的工具
• codemirror：網(wǎng)頁代碼編輯器
• ant-design：React UI組件庫
• mobx：狀態(tài)管理庫
• highlight.js：代碼高亮庫
• MathJax-node：公式轉(zhuǎn)圖片庫
• axios、ali-oss、qiniu-js等

注：下文會(huì)提到上述某些開源庫，開源庫具體作用請(qǐng)參考此處。

在擁有上述技術(shù)傍身之后，我向微信編輯器宣戰(zhàn)，打響了戰(zhàn)斗第一槍！

2.2 戰(zhàn)斗第一槍：代碼主題

微信公眾號(hào)在2018年以前，是完全不支持代碼塊的，目前的支持也很單一，并且存在代碼字體較大的問題。

說來很氣，微信公眾號(hào)編輯器的開發(fā)者，就木有想過代碼塊對(duì)程序員群體是多么重要么？？

為此我找來了highlight.js代碼高亮神器，幫助解決代碼主題單一的問題。

經(jīng)過一定的篩選后，最終選定了 atom-one-dark、atom-one-light、monikai、GitHub、vs2015、xcode 和微信代碼主題共 7 個(gè)代碼樣式供大家選擇。

其中微信代碼主題由于其不屬于highlight.js的歸屬范疇，故而其結(jié)構(gòu)需要從微信公眾號(hào)編輯器源碼中獲取，下面兩張圖展示了如何獲取：

而 highlight.js 與 markdown-it 解析器是關(guān)聯(lián)使用的，故而工具中存在 2 個(gè) markdown 解析器，分別用于解析微信代碼主題和其他代碼主題，源碼參考。

除了上述問題外，很多技術(shù)類公眾號(hào)代碼中會(huì)存在：一行代碼過長(zhǎng)導(dǎo)致的多行顯示問題。

該問題使用以下 CSS 代碼即可解決：

pre code {display: -webkit-box !important}復(fù)制代碼

對(duì)比效果如圖所示：

從此以后使用 Markdown Nice 的同志們代碼更美觀啦！

2.3 戰(zhàn)斗第二槍：圖片上傳

一篇好的文章怎么可以沒有圖片？

（某些技術(shù)人員說：我的就沒有）

圖片管理是每一個(gè)成熟編輯器都會(huì)遇到的問題。

Nice 寶寶最開始使用 SM.MS 圖床，該圖床由一位大佬在運(yùn)維，非常感謝！

使用該圖床雖然能夠上傳圖片，但是粘貼到微信編輯器時(shí)，失敗率極高（想踩死微信編輯器），如圖所示：

真是{喜聞樂見|hē hē hē hē}呀！

為了解決上述問題，Markdown Nice 先后支持了自定義阿里云和七牛云圖床，通過購買阿里云和七牛云的服務(wù)使用自建圖床。

但是！讓使用者自己配置，盡管有配置文檔，但是整個(gè)配置過程復(fù)雜無比，簡(jiǎn)直慘絕人寰！

于是，Nice 寶寶又使用自己的賬號(hào)，自建圖床，設(shè)定保存時(shí)間為一天，提供臨時(shí)排版使用的 mdnice 圖床。至此，工具中的圖片上傳支持情況如下：

這場(chǎng)圖床的戰(zhàn)役中，最大的難度在于需要閱讀阿里云 OSS 和七牛云 KODO 的文檔，并且使用其開源出來的工具包 ali-oss 和 qiniu-js 。

這其中又涉及到了 FormData、file對(duì)象、base64 和 blob 之間的神奇轉(zhuǎn)換，源碼參考。

總之，這場(chǎng)戰(zhàn)斗打的不亦樂乎。

2.4 戰(zhàn)斗第三槍：數(shù)學(xué)公式

微信公眾號(hào)排版中，數(shù)學(xué)公式是一個(gè)噩夢(mèng)！

因?yàn)槲⑿啪庉嬈髯隽艘韵氯虑椋?/p>

• 不支持公式編輯
• 不支持 html 和 css 生成的公式，因?yàn)樽煮w無法導(dǎo)入
• 不支持 svg，放入后提示失敗

這三件事情簡(jiǎn)直像魔鬼的步伐，把公式需求者放在光滑的地板上摩擦、摩擦….

目前唯一可行的方案就是將公式轉(zhuǎn)換成圖片，再將圖片直接貼到公眾號(hào)里，Nice寶寶覺得自己這個(gè)想法簡(jiǎn)直是完美！

但是，怎么做呢……

忽然靈機(jī)一動(dòng)，想到了朋友曾經(jīng)推薦的一個(gè)轉(zhuǎn)換公式網(wǎng)站 codecogs，這個(gè)網(wǎng)站能夠做到將任意公式轉(zhuǎn)換成png圖片并給出可訪問鏈接。

但是由于圖片穩(wěn)定性，無法直接使用該鏈接，會(huì)存在和第二場(chǎng)戰(zhàn)役一樣，圖片粘貼失敗的情況，讓人苦不堪言。

• 這個(gè)問題該怎么解決呢？如果能夠自建公式轉(zhuǎn)png圖片服務(wù)就好了。
• 有沒有這樣的開源庫？有！MathJax-node 就可以！

于是Nice寶寶自建后臺(tái)服務(wù)，封裝 RESTful 接口供前端調(diào)用，實(shí)現(xiàn)了公式轉(zhuǎn)圖片的功能！經(jīng)過測(cè)試，完全可以使用，粘貼后再根據(jù)排版情況調(diào)整圖片大小即可。

其中對(duì)于大量公式的轉(zhuǎn)換，前端合理使用了異步請(qǐng)求，并非一個(gè)個(gè)轉(zhuǎn)換而是并行執(zhí)行，性能上達(dá)到了10個(gè)公式也能2秒轉(zhuǎn)換完畢的效果，完全可用于公式排版。

2.5 戰(zhàn)斗第四槍：微信外鏈轉(zhuǎn)腳注

眾所周知（不知道也得知道），微信不支持外鏈，除了域名為https://mp.weixin.qq.com/的合法鏈接外，其他的鏈接出現(xiàn)后都會(huì)被自動(dòng)刪除。

而添加外鏈的唯一官方方式就是在閱讀全文處，當(dāng)然，直接將鏈接本身放到文中或者制作二維碼圖片也是可以的選擇。

而 Nice 寶寶則提供了將微信外鏈轉(zhuǎn)為腳注的方式解決該問題，是不是很優(yōu)雅呢？

其中鏈接和腳注的使用區(qū)別如下：

鏈接：[文字](鏈接 "文字") 腳注：[文字](腳注解釋 "腳注名字")復(fù)制代碼

這里又涉及到了一個(gè)常見的問題，就是很多公眾號(hào)作者的文章中，原來在其他平臺(tái)發(fā)布時(shí)都是鏈接，而到這里排版時(shí)需要進(jìn)行挨個(gè)修改，實(shí)在是讓人頭大。

于是Nice寶寶我又做了一個(gè)小改進(jìn)，就是在粘貼文章的時(shí)候會(huì)自動(dòng)監(jiān)測(cè)是否存在外鏈，并提示作者是否一鍵轉(zhuǎn)成腳注，這樣就不必手工修改了，贊不贊！

2.6 戰(zhàn)役總結(jié)

和微信公眾號(hào)編輯器對(duì)抗，是個(gè)極其有意思的過程。除了上述提到的問題之外，還有很多的細(xì)節(jié)點(diǎn)需要注意，在此就不一一討論了，感興趣歡迎閱讀源碼。

Markdown Nice 的戰(zhàn)斗之旅還遠(yuǎn)遠(yuǎn)沒有結(jié)束，官網(wǎng)制作、瀏覽器插件、本地工具和排版糾正等功能蓄勢(shì)待發(fā)。

三、談點(diǎn)和戰(zhàn)斗無關(guān)的

3.1 設(shè)計(jì)理念

大多數(shù)人而言，內(nèi)容重于排版，排版重于設(shè)計(jì)。

內(nèi)容是吸引讀者的核心，所以最重要。

而排版與設(shè)計(jì)之間的比較，作為一個(gè)曾經(jīng)的微信美術(shù)編輯，隨著排版經(jīng)驗(yàn)的增多，發(fā)現(xiàn)文章的效果并不在于額外的花邊、點(diǎn)綴。

整齊、舒服、簡(jiǎn)單是硬道理!

3.2 內(nèi)容、排版與設(shè)計(jì)

設(shè)計(jì) = 排版 + 創(chuàng)意

因?yàn)椋捍蠖鄶?shù)人不會(huì)獲取創(chuàng)意，或認(rèn)為創(chuàng)意成本過高。

所以：大多數(shù)人不做設(shè)計(jì)，富文本設(shè)計(jì)不適合單純的內(nèi)容編輯者。

雖然：大多數(shù)人也不會(huì)排版，或認(rèn)為排版成本過高。

但是：Markdown Nice 將用戶從排版中釋放出來，只關(guān)注內(nèi)容本身。

3.3 關(guān)于開源

開源是個(gè)既簡(jiǎn)單又困難的過程：

• 說簡(jiǎn)單是因?yàn)?/strong>：筆記、書單、工具、平臺(tái)所有有價(jià)值的東西都可以在 GitHub 中輸出，做起來很簡(jiǎn)單
• 說困難是因?yàn)?/strong>：努力做到對(duì)別人有價(jià)值，始終堅(jiān)持輸出，做起來很困難