扩展博客园的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编辑器

结束

但愿博客园开发同窗考虑加上相似功能 :)