亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

目錄
一、引子
1.1 Markdown 是什麼?
1.2 怎麼跟微信公眾號結(jié)合?
1.3 Markdown Nice 是什麼?
二、正文
2.1 戰(zhàn)鬥序章
2.2 戰(zhàn)鬥第一槍:程式碼主題
2.3 戰(zhàn)鬥第二槍:圖片上傳
2.4 戰(zhàn)斗第三槍:數(shù)學公式
2.5 戰(zhàn)斗第四槍:微信外鏈轉(zhuǎn)腳注
2.6 戰(zhàn)役總結(jié)
三、談點和戰(zhàn)鬥無關(guān)的
3.1 設(shè)計理念
3.2 內(nèi)容、排版與設(shè)計
3.3 關(guān)於開源
首頁 微信小程式 微信開發(fā) 棘手的微信公眾號編輯器

棘手的微信公眾號編輯器

Sep 04, 2020 pm 04:41 PM

棘手的微信公眾號編輯器

相關(guān)學習推薦:微信公眾號開發(fā)教程

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

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

Markdown 解決排版的靈丹妙藥,應運而生。

一、引子

1.1 Markdown 是什麼?

Markdown 是一種排版語法,擁有極簡的輸入方式和極低的學習成本。

富含了標題、引用、加粗、連結(jié)、圖片、程式碼片段、公式等一切在文字創(chuàng)作中所需的排版格式。

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

棘手的微信公眾號編輯器

1.2 怎麼跟微信公眾號結(jié)合?

這麼優(yōu)秀的排版文法,可是微信公眾號也不支持呀。

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

1.3 Markdown Nice 是什麼?

一款開源 Markdown 編輯器,寫完後即排版成功,複製即可貼上到微信公眾號。

So what?只有這點麼?

當然不是! Nice寶寶你還有什麼特質(zhì)呀?

棘手的微信公眾號編輯器
  • 支援圖床、腳註、程式碼、公式
  • 支援8 種排版主題和7 種程式碼主題
  • 支援自訂樣式,可提交主題供人瞻仰
  • 除了公眾號碼外,還支援知乎、掘金、部落格花園和CSDN等平臺
  • 我顏值高呀
棘手的微信公眾號編輯器

這麼多優(yōu)秀的特性擺在你面前,還在等什麼?

網(wǎng)址:https://mdnice.com

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

二、正文

沒想到你還在看

咳、、

不要小看Nice寶寶我,為了能夠使用Markdown 進行公眾號排版,我可是和微信公眾號編輯器做了半年的鬥爭,才贏得了現(xiàn)在的戰(zhàn)果!

棘手的微信公眾號編輯器

想聽聽我是如何戰(zhàn)鬥的?下面且聽我嘩啦道來!

2.1 戰(zhàn)鬥序章

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

棘手的微信公眾號編輯器

因為ueditor 是富文本編輯器,所以我即將面臨的是markdown->富文本 的轉(zhuǎn)換戰(zhàn)役,在開源界或軟體界這種轉(zhuǎn)換戰(zhàn)役有了相當多的優(yōu)秀實現(xiàn)。例如:

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

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

那麼有沒有嘗試彌補這一問題的工具呢?其實是有的:

  • Web端:md2all、wechat-format
  • 瀏覽器外掛:markdown-here
##但是上述工具也各自有不完美的地方,於是Nice寶寶我發(fā)現(xiàn)了這個契機,把自己生產(chǎn)了出來,解決一切不完美!

Markdown Nice 是一個開源項目,由許多開源技術(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等

註:下文會提到上述某些開源庫,開源庫具體作用請參考此處。

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

棘手的微信公眾號編輯器

2.2 戰(zhàn)鬥第一槍:程式碼主題

微信公眾號在2018年以前,是完全不支援程式碼區(qū)塊的,目前的支援也很單一,並且存在程式碼字體較大的問題。

說來很氣,微信公眾號編輯器的開發(fā)者,就木有想過程式碼區(qū)塊對程式設(shè)計師群體是多麼重要么? ?

棘手的微信公眾號編輯器

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

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

其中微信程式碼主題由於其不屬於highlight.js的歸屬範疇,故而其結(jié)構(gòu)需要從微信公眾號編輯器源碼中獲取,下面兩張圖展示瞭如何獲?。?

棘手的微信公眾號編輯器
棘手的微信公眾號編輯器

#而highlight.js markdown-it 解析器是關(guān)聯(lián)使用的,故而工具中存在2 個markdown 解析器,分別用於解析微信程式碼主題和其他程式碼主題,原始碼參考。

除了上述問題外,許多技術(shù)類別在公眾號程式碼中會存在:一行程式碼過長導致的多行顯示問題。

此問題使用以下CSS 程式碼即可解決:

pre?code?{display:?-webkit-box?!important}復制代碼

對比效果如圖所示:

棘手的微信公眾號編輯器

從此使用Markdown Nice 的同志們程式碼更美觀!

2.3 戰(zhàn)鬥第二槍:圖片上傳

一篇好的文章怎麼可以沒有圖片?

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

棘手的微信公眾號編輯器

#圖片管理是每個成熟編輯器都會遇到的問題。

Nice 寶寶最開始使用 SM.MS 圖床,該圖床由一位大佬在運維,非常感謝!

使用該圖床雖然能夠上傳圖片,但是貼到微信編輯器時,失敗率極高(想踩死微信編輯器),如圖所示:

棘手的微信公眾號編輯器

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

為了解決上述問題,Markdown Nice 先後支援了自訂阿里雲(yún)和七牛雲(yún)圖床,透過購買阿里雲(yún)和七牛雲(yún)的服務使用自建圖床。

但是!讓使用者自己配置,儘管有配置文檔,但是整個配置過程複雜無比,簡直慘絕人寰!

棘手的微信公眾號編輯器

於是,Nice 寶寶又使用自己的帳號,自建圖床,設(shè)定保存時間為一天,提供臨時排版使用的mdnice 圖床。至此,工具中的圖片上傳支援情況如下:

自訂
圖床 費用 有效期限 失敗率
mdnice 免費 1天
SM.MS #免費 長期
七牛雲(yún) 10G免費
棘手的微信公眾號編輯器

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

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

總之,這場戰(zhàn)斗打的不亦樂乎。

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

微信公眾號排版中,數(shù)學公式是一個噩夢!

因為微信編輯器做了以下三件事情:

  • 不支持公式編輯
  • 不支持 html 和 css 生成的公式,因為字體無法導入
  • 不支持 svg,放入后提示失敗

這三件事情簡直像魔鬼的步伐,把公式需求者放在光滑的地板上摩擦、摩擦....

棘手的微信公眾號編輯器

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

但是,怎么做呢......

棘手的微信公眾號編輯器

忽然靈機一動,想到了朋友曾經(jīng)推薦的一個轉(zhuǎn)換公式網(wǎng)站 棘手的微信公眾號編輯器,這個網(wǎng)站能夠做到將任意公式轉(zhuǎn)換成png圖片并給出可訪問鏈接。

棘手的微信公眾號編輯器

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

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

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

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

棘手的微信公眾號編輯器

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

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

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

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

棘手的微信公眾號編輯器

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

鏈接:[文字](鏈接?"文字")
腳注:[文字](腳注解釋?"腳注名字")復制代碼

這里又涉及到了一個常見的問題,就是很多公眾號作者的文章中,原來在其他平臺發(fā)布時都是鏈接,而到這里排版時需要進行挨個修改,實在是讓人頭大。

棘手的微信公眾號編輯器

于是Nice寶寶我又做了一個小改進,就是在粘貼文章的時候會自動監(jiān)測是否存在外鏈,并提示作者是否一鍵轉(zhuǎn)成腳注,這樣就不必手工修改了,贊不贊!

棘手的微信公眾號編輯器

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

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

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

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

3.1 設(shè)計理念

大多數(shù)人而言,內(nèi)容重於排版,排版重於設(shè)計。

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

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

整齊、舒服、簡單是硬道理!

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

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


因為:大多數(shù)人不會獲得創(chuàng)意,或認為創(chuàng)意成本過高。

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


#雖然:大多數(shù)人也不會排版,或認為排版成本過高。

但是:Markdown Nice 將使用者從排版中釋放出來,只專注於內(nèi)容本身。

3.3 關(guān)於開源

開源是個既簡單又困難的過程:

  • 說簡單是因為:筆記、書單、工具、平臺所有有價值的東西都可以在GitHub 中輸出,做起來很簡單
  • #說困難是因為:努力做到對別人有價值,始終堅持輸出,做起來很困難

正如上面描述的那樣,做開源其實是在做一款產(chǎn)品,有可能是技術(shù)產(chǎn)品(例如redis、ant design),也有可能是業(yè)務產(chǎn)品(例如Markdown Nice),只有做好了才可能對別人產(chǎn)生價值。

做產(chǎn)品的過程曲折而漫長,對照Markdown Nice 開發(fā)過程,可以看到以下的步驟:

  1. 要有一個idea,並且驗證其可行性和必要性,去和同類產(chǎn)品比較,做到心中有數(shù)
  2. 抓住痛點,掌握核心價值,站在用戶角度思考,多聽反饋意見
  3. 螺旋上升,不斷迭代,產(chǎn)出精品
  4. 最最重要一點,做產(chǎn)品不只要寫程式碼,還要宣傳呀! !酒香也怕巷子深! !

參與開源,一路走來,甚是不易,望君珍惜。

最後,感謝每位開源參與者,歡迎更多人參與開源中來,還有好多程式碼等著有人來寫呢!

棘手的微信公眾號編輯器

『講解開源專案系列』—讓對開源專案感興趣的人不再畏懼、讓開源專案的發(fā)起者不再孤單。跟著我們的文章,你會發(fā)現(xiàn)程式設(shè)計的樂趣、使用和發(fā)現(xiàn)參與開源專案如此簡單。歡迎留言聯(lián)絡(luò)我們、加入我們,讓更多人愛上開源、貢獻開源~

相關(guān)學習推薦:微信小程式教學

#

以上是棘手的微信公眾號編輯器的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章!

本網(wǎng)站聲明
本文內(nèi)容由網(wǎng)友自願投稿,版權(quán)歸原作者所有。本站不承擔相應的法律責任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容,請聯(lián)絡(luò)admin@php.cn

熱AI工具

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅(qū)動的應用程序,用於創(chuàng)建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發(fā)環(huán)境

Dreamweaver CS6

Dreamweaver CS6

視覺化網(wǎng)頁開發(fā)工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)