在用的主力電腦是一臺 2018 款 15英寸 MacBook Pro。它給我的工作、學(xué)習(xí)、娛樂帶來很多便利和好的體驗。今天跟大家分享一下，工作日常中我是如何在這臺 Mac 上完成一篇公眾號文章的。

選題

有時候臨時想到一個選題，或者從大家的留言評論中，覺得值得寫一篇文章就會記在 Mac「提醒事項」App 里。確定寫的日期也會加上。

偶爾也會直接新建一篇文章，只加上選題標(biāo)題，下次再補(bǔ)充完內(nèi)容。比如在我正在寫一篇文章時突然想到另外一個選題。

構(gòu)思文章結(jié)構(gòu)

大多數(shù)情況下，我都是一邊寫文章一邊構(gòu)思文章的結(jié)構(gòu)。有時會先在正文開頭用 Markdown List 簡單列出文章的結(jié)構(gòu)。

在遇到比較復(fù)雜的文章時，也會選擇用思維導(dǎo)圖工具來幫助我理清內(nèi)容結(jié)構(gòu)。比如 MindNode。

寫文章

我目前主要在 MWeb 上寫文章。MWeb 是一款 Markdown 寫作工具，非常強(qiáng)大。Markdown 是一種非常簡潔流暢的書寫形式。能夠讓我專注于內(nèi)容本身，而不用去關(guān)心格式排版之類的。這也是我從來不用 Word、Pages 之類的寫文章的原因。

我的 MWeb 文檔庫中創(chuàng)建了一個「內(nèi)容創(chuàng)作」分類，公眾號文章都會放在這個分類里。MWeb 還能在 Mac、iPad、iPhone 之間同步。我的 11 英寸 iPad Pro 配了一個智能雙面夾鍵盤，我也經(jīng)常在 iPad Pro 上利用閑碎時間寫文章，比如沙發(fā)上、高鐵上?？缍送綄懽黧w驗還是蠻爽的。

文章配圖

我的大部分文章都會有配圖，并且這些配圖往往不是簡單的一張照片。大多都需要先制作處理。制作配圖是寫文章中非常耗時的事情。有時候配圖的時間會超過寫文字本身用的時間。

我常用的做圖工具是 Pixelmator Pro。我會用它修改圖片大小、格式、裁切等。也會用它給圖片添加文字、或者摳除圖片中不需要的部分。Pixelmator Pro 對我來說是完全可以替代 PS 的存在。并且價格相比 Photoshop 來說太便宜了，對了這款軟件最近還在打折中（￥188）。

近期我也會制作 Pixelmator Pro 相關(guān)圖文和視頻教程。

我有時候也會用 Keynote 做圖，比如文章封面圖、圖表、元素等。

文章中的 GIF 動圖，我使用 GIF Brewery 3 來制作。這款軟件可以把視頻制作成 GIF 動圖，有很多參數(shù)可以設(shè)置。

排版

有了文字和配圖，就是一篇完整的文章了。公眾號文章是可以排版樣式的，但是我一般不會去用公眾號后臺的排版工具，太低效。

之前我有根據(jù)別人的公眾號排版網(wǎng)頁工具改寫成適合自己的網(wǎng)頁排版工具。只需要把 MWeb 文章的 Markdown 粘貼到排版工具左側(cè)，然后就會在右側(cè)顯示排版好的效果。復(fù)制排版后的文章，再在公眾號后臺編輯器粘貼，就是一篇排版好的公眾號文章了。最后加上封面、設(shè)置原創(chuàng)、原文鏈接之類的就可以發(fā)布了。

但是網(wǎng)頁排版工具畢竟不方便，圖片需要先上傳到圖床（MWeb 有一鍵上傳），而且在沒有網(wǎng)絡(luò)的情況下就不能用了。所以我現(xiàn)在用另外一種更便捷好用的方法。

MWeb 的「預(yù)覽」模式支持自定義主題樣式。我就自己寫了一個「Mac派」的主題樣式。每次寫完文章，切換到預(yù)覽模式，復(fù)制文章，在公眾號后臺編輯器粘貼就 OK 了。

如果你想試試「Mac派」的文章樣式，可以在公眾號后臺回復(fù)「CSS」獲取樣式文件下載。

除了 MWeb，很多 Markdown 寫作工具都有自定義樣式功能。比如很貴的 Ulysses 和免費的 Typora。

發(fā)布

我之前一直在 Ulysses 和 MWeb 這兩款寫作工具之前猶豫不決，最終選擇 MWeb 最主要的原因就是它強(qiáng)大的發(fā)布功能。

利用上面提到的自定義預(yù)覽樣式排版功能。我可以在寫完一篇文章就很快的粘貼發(fā)布到公眾號。

對了，iPad 上的 MWeb 也可以自定義預(yù)覽樣式。我在 MWeb for iPad 上使用了跟 MWeb for Mac 一樣的預(yù)覽樣式。這樣在 iPad 上寫完文章，一樣可以自動排版，并粘貼發(fā)布到公眾號后臺。也是有了這個能力，我現(xiàn)在外出幾乎不會帶 Mac，而是一臺 iPad Pro + 雙面夾鍵盤。

順便提一下，用 MWeb 我也可以非常方便的把文章發(fā)布到知乎專欄、頭條文章、少數(shù)派等其他平臺。

文章排版和分發(fā)是一件瑣碎耗時、又沒有太多技術(shù)含量的事。通過工具能幫我節(jié)省掉一部分時間。

總結(jié)

以上就是我日常寫作和發(fā)布公眾號文章的過程?？偟膩碚f比較靈活?；蛟S對你會有一些借鑒和啟發(fā)。如果你也經(jīng)常在 Mac（或 iPad）上寫東西，也可以在評論區(qū)分享你的經(jīng)驗和感受。

本文提到的軟件：

• MindNode：思維導(dǎo)圖
• MWeb：Markdown 寫作
• Pixelmator Pro：圖片處理
• Keynote：作圖
• GIF Brewery 3：GIF 制作
• Ulysses：Markdown 寫作
• Typora：Markdown 寫作（免費）

大家推薦一款簡單實用的文本編輯器，Typora for Mac的編輯功能齊全，支持插入文本、圖片、表格、代碼、數(shù)學(xué)公式等，typora mac版還支持實時預(yù)覽和所見即所得功能，讓你工作更加高效，Typora for Mac的界面齊全，具備許多HTML編輯器的基本特征，趕緊來試試吧！

Typora for Mac軟件介紹

Typora for Mac --- 極簡主義Markdown編輯器

Typora for Mac不像大多數(shù)Markdown編輯器，也不會其窗口拆分為源部分和預(yù)覽部分。相反，它讓你預(yù)覽您的作品在同一窗口，實時預(yù)覽。

Typora Mac版功能特點

?可讀寫

Typora將為讀者和作家提供無縫的體驗。它刪除預(yù)覽窗口，模式切換器，標(biāo)記源代碼的語法符號以及所有其他不必要的干擾。用真正的實時預(yù)覽功能替換它們，以幫助您集中內(nèi)容本身。

?簡單而強(qiáng)大

使用有組織的文本結(jié)構(gòu)來記錄事物

?無障礙

捆綁一個小而強(qiáng)大的MARKDOWN編輯工具集合

菜單，快捷鍵，表編輯器，MATHJAX編輯器和拖放圖像

?自定義主題

可以通過CSS完全配置

持word上傳的富文本編輯器，web編輯器，HTML編輯器，前端編輯器。編輯器網(wǎng)上搜了一下，比較多，

前端用了VUE2,VUE3，React，HTML5，也是一個新項目，為了方便用的這些框架，實際上這個是無所謂，功能的實現(xiàn)和前端這些框架沒什么關(guān)系。

后端用了PHP,JSP,ASP,ASP.NET,SpringBoot，功能實現(xiàn)和后端用的什么開發(fā)語言無關(guān)，后端只提供一個文件上傳的接口，HTTP form協(xié)議，圖片上傳時會調(diào)這個接口。

編輯器是ckeditor5，為ckeditor編輯器增加粘貼Word圖片的功能，支持快捷鍵操作（Ctrl+V），支持多種系統(tǒng)：Windows,macOS,Linux,信創(chuàng)國產(chǎn)化環(huán)境，中標(biāo)麒麟，銀河麒麟，統(tǒng)信，龍芯。

支持word粘貼，word內(nèi)容粘貼,word圖文粘貼,word圖片粘貼，粘貼后圖片能夠自動上傳到服務(wù)器中，然后將圖片和內(nèi)容HTML添加到編輯器中，上傳接口地址能夠自定義

示例項目：https://gitee.com/xproer/wordpaster-vue-ckeditor5
1.為ckeditor增加插件按鈕

1.下載ckeditor5源碼，注意：不是在npm中直接安裝ckeditor5，在npm中直接安裝的ckeditor5是已經(jīng)打包好的編輯器，我們無法為其添加插件，必須下載源碼添加好后再手動打包。

git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git

cd ckeditor5-build-classic

2.添加插件文件

將plugin下的插件復(fù)制到ckeditor5的目錄中

導(dǎo)入插件

在ckeditor.js中導(dǎo)入插件

3.添加插件

添加到工具欄

# 構(gòu)建，生成ckeditor.js，生成的ckeditor.js在build目錄下

yarn build

執(zhí)行命令后生成ckeditor.js

將打包好的ckeditor.js復(fù)制到項目中

2.復(fù)制layer,wordpaster目錄,安裝jquery

#通過命令安裝jquery

npm install jquery

3.在組件中導(dǎo)入樣式

代碼：

import {WordPaster,WordPasterManager} from ‘../../static/WordPaster/js/w’

import ‘../../static/WordPaster/js/w.css’

import ‘../../static/layer-v3.1.1/layer/layer’

import ‘../../static/layer-v3.1.1/layer/theme/default/layer.css’

4.初始化wordpaster組件

配置posturl,

代碼：

//初始化

WordPaster.getInstance({

PostUrl:”http://localhost:8891/upload.aspx”,

ImageUrl:”http://localhost:8891{url}”

}).Load();

整合效果：