扩展博客园的markdown编辑器

背景

作为程序员, 我有些"懒"也有些"散", 懒是不愿意做重复的事情, 散是到处撒网, 收获寥寥. 以往自己搭了博客, 写了不少文章, 可惜第一次服务商硬盘挂了, 没有数据..第二次到期忘了续费, 打不开了, 也懒得再去折腾.

这是我选择博客园的原因, 人多, 事少, 速度快.

稍微不满意的地方是markdown编辑体验有点(非常)糟糕..

编辑器需求和代码示例

我之前曾经做过web编辑器的研究, 也尝试过开发类似CodeMirror , ACE 这样的在线"代码编辑器", 但始终觉得这些都不是我想要的.

这类编辑器有三个痛点:

• 浏览器兼容性差, 看开发者的修订log就知道了, 每次新浏览器出来, 都可能出现一些兼容性问题;
• 性能不理想, 因为要完全模拟光标/选取, 甚至控制排版, 导致编辑大文件卡顿严重;
• 工作量巨大, 需要持之以恒, 反复调试, 很不容易.

当然, 上面这几个其实都是很优秀的作品, 也大量使用在线上产品, 所以对于研究和开发编辑器都是参考榜样.

作为最原始的"网页编辑器", textarea仍是使用率最高的, 比如github上的markdown编辑区域, 博客园. textarea作为编辑器优势:

• 文本样式单一, 样式通过标记描述, 写作不容易分心;
• 简单可依赖;

但劣势也很明显:

• 没有语法高亮支持;
• 没有键盘控制(快捷键)等;
• 没有自动完成, 代码片段等;

除了"语法高亮"有点困难外, 其他劣势通过js可以弥补.

所以编辑器的基本需求就下面几点:

• 快捷键;
• 自动完成;
• 代码片段;
• 文本替换: 上面需求的基础, 即根据键盘输入, 替换已输入的文本.

针对上面的需求, 可以总结为下面几点开发工作:

• 选区控制
• 编辑器初始化
• 词典文件 用于单词补全
• 代码片段, 用于快速替换. html, markdown

以上是我两三年前的代码, 可能代码组织一般..

示例

把上面几个js文件合并, 可以查看下面demo效果:

html编辑器

请尝试输入html<tab>, divc<tab>, divid<tab>查看效果, 更多功能光标在编辑器中按F1键查看:

markdown编辑器

请尝试输入h3<tab>, img<tab>查看效果, 更多功能光标在编辑器中按F1键查看:

更多功能:

• 体验自动完成, 输入字母a, 然后按<ctrl><down>组合键;
• 缩进多行, 选中多行按<tab>, 或者反向缩进<shift><tab>
• ...查看<F1>帮助吧, 好久了, 我已经不记得实现了那些功能了, 有兴趣的同学可以查看源码.

扩展

如果想扩展自己的代码片段或者单词表, 可以参考词典文件, markdown片段 来添加自己的单词.

扩展博客园的markdown编辑器

ok, 到此为止, 可以写一个收藏栏按钮来扩展博客园的markdown编辑器了.将下面链接拖到收藏栏, 在博客园编辑界面, 点击一下, 体验扩展后的markdown编辑器吧~

扩展markdown编辑器

结束

希望博客园开发同学考虑加上类似功能 :)