需求

先来简单分析下我的几个核心写作需求,毕竟工具的选用流程的建立都立足于需求的基础上

跨平台同步

原本的跨平台需求也就Windows/Android,但从Android系统手机换到iOS系统后,这里的跨平台就是真正意义上的跨平台了😂

  • iPhone
  • Android
  • Windows
  • MacBook(贫穷使我暂时不买)

平常除了正儿八经坐在电脑前看书做笔记,用手机看电子书/视频,或者干脆就是灵机一动需要记笔记的情况也很频繁,所以移动端的写作体验对我来说也非常重要

流程图

流程图个人感觉比较常见的有三种,js-sequence-diagram、flowchart以及mermaid系列,我喜欢的是mermaid,大概以下几个原因

  • 还在持续迭代开发推出新的版本、修复bug等
  • 有开放简洁的API,有集成到编辑器中的兄弟插件项目(具体见Documentation首页列表)
  • 图种类丰富(目前五种,支持子图),语法简洁,图示表达能力强
  • 接口生成的svg在各种尺寸设备的访问环境下都能很好的适配(适配不太好的例如sequence在hexo博客插件生成的图会破坏主题的格式⬇️)

边界溢出

实话说流程图这个需求对整个写作流程的影响非常大Orz,80%以上复杂的折腾都是起源于它,说多都是血泪啊……😫

任务列表

这个其实不是硬性需求,一开始在Cmd Markdown写作的时候看到支持顺便就用了,后来才发现似乎有不少编辑器不支持……

统一存储

跨平台必备操作,所有文档原稿最终统一存在一个地方,任何平台使用文件都从这里取出,修改也最终反馈回这里,以防万一将来切换工具链

一键发布/更新

除了尚未整理出来的笔记和杂乱的思绪之外,最终大部分的markdown文档最终都是要作为博客发布出去的。目前在使用的博客之一hexo静态博客,操作点被我放在了Linux服务器上,也就是说发布博客要先把md文件scp或其他方式传到服务器上先【尴尬😅


流程与集成

graph TD
a("iOS mobile: <hr> 1Writer") --> b("Storage: <hr> Dropbox")
c("Android mobile: <hr> StackEdit pwa") --> b
e("Win pc: <hr> StackEdit pwa") --> b
b --> k("StackEdit 4")
k --> |SSH Server|g>"Plugin: <hr> hexo-filter-mermai"]
g -->f("hexo blog")
b --> | copy |i>"code injection"]
i --> h("ghost blog")
subgraph editor
a
c
e
end
subgraph cloudstorage
j("Google Drive<hr>(deprecated)")
b
end
subgraph custom
g
i
end
subgraph blog
f
h
end

书写(文字、插图等)

在移动端或pc端上用对应的各个工具完成写作排版,同步到云存储,随时准备切换平台继续未完的写作

关于截图,用的Windows自带的截图工具(感觉很多人都不知道还有这么个东西了hhh)。图片较多时可能考虑统一存到临时文件夹中,写作完成后一次性拖拽上传

发布

目前要发布的有两个平台,一个hexo静态博客一个ghost半动态博客,两个平台都有难以舍弃的特性所以最终还是一起使用了

修改


工具

StackEdit(核心,强烈推荐)

差点点就一统全平台,满足我所有写作发布存储需求的超强开源编辑器,要不是因为不明原因在iPhone浏览器上表现不佳,根本不需要花钱折腾后面几个iOS生态的编辑器

首先这是个移动适配良好的web端编辑器,已经支持了PWA,执着于桌面端应用程序的强迫症也能一并被收了。下面是我通过chrome添加到桌面应用直接点开的效果,基本跟原生桌面客户端体验没什么区别了

enter image description here

优点太多不一一介绍,就提下我钟爱的一些特性吧

  • mermaid流程图支持:这个冷需求至少炸掉了一半的编辑器候选,目前见过的在PC上支持比较好的也就Typora、StackEdit还有mermaid开发者之一自己写的一个小众编辑器

  • 一键发布/更新:支持不少常用的博客站点一键发布,修改后一键更新。对我来说最重要的一点是他支持一键上传SSH服务器,这对我发布博文到操作hexo的Linux服务器上异常重要,没有这功能我怕是得每次手动导出再手动scp上去

  • 自定义模板:之前有同事提到过想要一键发布到

  • 自动同步,支持回滚:双向同步,跟1Writer一样,非常重要,具体后面会说。每个文件也保留一定的历史版本,在选择回退的时候还有diff显示,可以说非常良心了

  • 第三方云端存储支持丰富:除了常见的Dropbox,还支持Google Drive、Github等等

  • 完全开源,持续开发中:这不是功能特性但非常重要,因为停止迭代开发就不会再修复bug,久而久之项目很可能就烂了……而开源意味着有自己修改再部署的可能性 (至少不用担心作者突然跑路我们可以备份)

当然StackEdit也不是万能的,缺点还是有的

  • 自定义API发布:还是之前与同事讨论时提到的,如果能提供一个简单的自定义post请求发布设置,我们甚至可以自行搭建服务器将文档发布到任意私人平台(PS:这应该不算缺点,算可扩展性吧)

  • 标签、搜索管理:左侧栏只提供了简单的目录,没提供标签功能。事实上有了第三方存储的Dropbox和Google Drive之后这个问题就不大了,标签管理可以直接在第三方里完成。至于搜索,目前文档量还少暂时没感到麻烦,而且也有1Writer补足,问题应该不大

enter image description here

  • 光标漂移(轻度):使用过程中确实偶尔操作时光标会漂移到别的位置,这点感受并不很明显,也不频繁,不知道算不算bug

小问题

  • 中文字数统计不准确:小问题,不重要。有了1Writer之后这个问题也一并解决了

StackEdit是目前用过的体验最棒的Markdown编辑器~~(如此优秀的服务还不收钱)~~,强烈推荐大家使用并到项目给个star

Sublime Text + markdown扩展

最开始写作时想得很简单,也没打算云化,工具能少尽量少,所以在常用的文本编辑器上装了个扩展

无奈预览严重卡顿,遂放弃(不知道现在修复没有)

Cmd Markdown(放弃)

开始markdown写作最初使用的工具。交互、格式、预览都挺不错,用了一段时间还挺舒心,不过随着需求升级,存在的很多硬伤就都暴露出来了

纯pc/伪web端应用,之所以说是伪web端是因为web端完全没有响应式适配……移动端打开根本不能看

pc端看起来应该是web端用node-webkit打包了个exe,两者长相一模一样。打包的pc端exe包也有60多M,挺浪费空间的

流程图语法支持mermaid但是改的莫名其妙,像是从mermaid那里抄过来强行集成进去的,一般的mermaid语法是这样的⬇️

```mermaid
graph LR
(图内容)
```

它的是这样的⬇️

```graphLR
(图内容)
```

改得有点迷,此外subgraph以及其他一些高级写法也不支持 (要不是没抄完要不是抄的速度赶不上人家开发的速度)

云端空间完全自带,基本不通第三方,免费版居然只支持打开最近15个文件???不删掉新的完全没有任何手段访问老的文件(厉害了大哥)

看起来像被放弃的项目,很久没有更新出新版本了。哪天撤掉服务器跑路你将损失一吨数据想想还有点小害怕呢

Typora

纯pc端应用,职能跟StackEdit重复很多,占的空间挺大的其实,主要用于导出带mermaid流程图的pdf(StackEdit5导出pdf功能不免费,付费方式似乎只支持刷卡而我没卡,StackEdit4还没支持mermaid)

非常漂亮,虽然不是刚需也留下了,偶尔导出个html或者PDF什么的

enter image description here


下面是尝试过的iOS移动端的一些编辑器,其实原本考虑到StackEdit是移动端适配良好的web编辑器,换了iPhone之后应该也能照常使用的

然而没想到iPhone上无论是Safari还是chrome浏览器上都出现了cursor的bug

具体表现为选择无效:普通选择、全选都无效,选中后复制无效(粘贴板内没有任何内容),选中后删除无效等等

直接浏览器访问都有问题更不用说pwa了……失望(买iPhone的时候还特地确认iOS 11.3正式支持pwa了来着……😭)

没办法,只好开始寻找能与原本写作流程集成的新工具。简单尝试过后放弃了在移动端支持mermaid流程图的妄想,毕竟要导入800多k的js,mermaid的渲染还必须要求浏览器的支持,估计iOS端的编辑器要不是不支持完整的浏览器,要不就干脆把这些代码给embedded了……

哈哈哈哈开玩笑😝怎么能如此轻易放弃我们战五渣从不轻易弃疗,经过一波改进在移动端某种程度上也支持了mermaid流程图预览,具体见下面叙述吧😏

iA Writer(基本放弃)

全平台应用,iOS移动端支持打开修改保存Google Drive和Dropbox,看到支持Google Drive的一瞬间还以为不用迁移了……

然而还是有硬伤,打开文件修改后可以自动同步到Dropbox的文件上,但Dropbox文件的修改不会自动更新到当前打开文件上(我能改你你不能改我可以说是很霸道了)

虽然看起来能如下图一样初步显示mermaid流程图,但貌似没提供扩展脚本编写,没地方插js

B4706773-4B48-4555-8FD4-EC7265636EEE.jpg

这应用30块钱浪费的我格外心疼QAQ(iOS不允许试用的工具全是耍流氓QAQ)

MWeb(放弃)

iOS应用,有Mac版(贵的一笔),操作便捷,交互流畅美观,基本功能齐全,初始好感度极高

移动端基本功能使用不收费,说是支持同步到Dropbox,但实际上移动端只支持打开和新增操作,不支持修改(…………)

幸好没下手买,不然又得损失60软妹币

1Writer

最终决定在iOS移动端使用的编辑器,先简单总结下优点⬇️

  • Dropbox自动更新同步,也有手动下拉刷新同步功能,这点完爆iA Writer
  • 内置浏览器,直接右拉切换,一定程度上的查找资料工作可以在应用内完成
  • JavaScript脚本扩展功能,可以自行编写所需功能
  • 内置浏览器+脚本扩展:以这两项功能为基础,mermaid流程图移动端支持完美达成✌️

能在iOS移动端编辑器上实现流程图渲染真是万万没想到。如果说脚本扩展功能给我好感+16,内置浏览器大概是好感+1024(毕竟mermaid的一个重伤就是必须浏览器环境才能调用API渲染),两种功能一起提供:好感突破天际

狂喜乱舞,当即写了两个小脚本:

一个全局检查,一个选中语法部分直接单个检查,这样一来在移动端也能边画边检查流程图了😆

移动端

有个微不足道的小缺点,没有TOC展示。当然这不是问题,脚本自己写一个非常容易哈哈哈哈哈😂

30软妹币花的算物有所值吧


Google Drive(准备放弃)

开始登陆StackEdit用的就是Google账号,于是自然而然选择了Google Drive,没想到支持对接的编辑器不多,目前准备放弃了

Dropbox

最近搜索观察了下才发现很多markdown编辑器支持的第三方存储都是Dropbox,Google Drive支持反而很少

为了以防万一将来需求变更换工具,于是将存储转移到Dropbox

幸好Dropbox在StackEdit的第三方存储支持里,不过不知为何文件标题不支持中文

Dropbox空间就2G,存不了多少其他内容,但存文档还是绰绰有余的

Discord/Slack

知道这俩应用正常用途的小伙伴应该会好奇为什么他们会出现在这里

其实,主要是用来当免费稳定的图床😂

很多人应该会喜欢点击图片上传自动生成链接然后自动插入的方式,比如1Writer、ghost博客支持的这种。这种方式下更多都是要你自己提供存储空间的(1Writer上传到Dropbox,Ghost博客设置七牛云/Amazon S3等),自己的免费存储空间有限,有的还有访问限制(万一被攻击了呢),不如大规模第三方“顺带”提供的图床功能来的稳,还不用担心容量

当然这主要还是因为我插图的需求量较少,不需要那么高的自动化程度

大部分博文的图片都是只有展示一次的需求,并不是需要持久化存储到个人空间的资源,没必要费心思去整合这个流程

此外,万一将来有了更重要的资源要云端存储,删图片换图床挨个替换链接又是一个麻烦的过程

此外的此外,这些云存储全是无需额外设置的HTTPS,Discord的web端支持粘贴板直接上传文件,省去了图插入后还要从本地删除的过程


总结

相似的工具

整个工作流的搭建(包括博客设置)其实花费了很长时间,功能齐全、方便且成本低的工具很不好找。以前也吐槽过,当你需要功能ABCDEFGH时,必然要面对事实:市面上的产品a支持ABCD、b支持CDEFH、c支持ABCDEFG、d支持AEFH……😂

总之就是不能让你在一个产品内好好的完成所有工作,功能重复的产品非得三四个一起用,简直活生生逼死(拒绝使用职能重复工具)强迫症患者……

话说回来强迫症患者被活生生逼死难道不是日常宿命么

待改进

一键发布这个自动化功能其实没有完全实现,因为ghost博客上的发布修改还是要手动复制粘贴

  • StackEdit不支持一键发布ghost博客。在issue下看到有人提了这个需求,就是不知道开发者什么时候会理了……

  • ghost博客似乎没有暴露出发布的API接口(大概看了下官网文档,被归到private api里了,但private api里也没看到示例)

所谓同步

在寻找过程中尝试过的不少编辑器都表示支持多平台同步(你这么吹比难道不会心虚吗)

这里的同步方式、同步效果是有区别的

双向同步

最理想的应该是双向同步,例如像StackEdit、1Writer这样,完全自动同步或手动点击就能保证更新,针对特定路径(如一个文件夹)内所有文件有效

graph LR
a("A端") --> |修改<br>更新存储|b("第三方存储<br>(所有文件)")
b --> |检测到变化<br>更新文件|c("b端")
c --> |修改<br>更新存储|b
b --> |检测到变化<br>更新文件|a

更新不及时出现冲突时1Writer似乎会单独保存另一个版本出来(未验证)

单向同步

个人觉得这种方式比较坑。简而言之你通过iA Writer做的修改会保存到第三方存储文件中,但第三方存储文件的修改不会主动更新到你当前编辑的文件上

没有详细研究验证过,猜测iA Writer应该是这么操作的↓

  • 从第三方存储拷贝副本到本地
  • 本地修改完成强制提交覆盖到第三方存储

在别处修改了文件存储到第三方,要想在iA Writer中打开最新版只能删除原本打开的文件再重新从目录中打开,否则直接编辑自动提交的结果会覆盖掉你在别处的修改

(难怪提供了额外的backup机制你们也知道这波操作非常坑啊)

限定范围同步

在MWeb上设定Dropbox目录为第三方存储,目录中原本存在的文件不在同步范围内

官方文档有提到设定目录后会有额外的db文件出现,应该是用于多平台版本控制同步的索引吧

这样一来也许同步控制功能会更强一些?或者对开发者编码实现来说会更简单一些?


Written with StackEdit.