扩展博客园的markdown编辑器
背景
作为程序员, 我有些"懒"也有些"散", 懒是不愿意做重复的事情, 散是到处撒网, 收获寥寥. 以往自己搭了博客, 写了不少文章, 可惜第一次服务商硬盘挂了, 没有数据..第二次到期忘了续费, 打不开了, 也懒得再去折腾.
这是我选择博客园的原因, 人多, 事少, 速度快.
稍微不满意的地方是markdown编辑体验有点(非常)糟糕..
编辑器需求和代码示例
我之前曾经做过web编辑器的研究, 也尝试过开发类似CodeMirror , ACE 这样的在线"代码编辑器", 但始终觉得这些都不是我想要的.
这类编辑器有三个痛点:
- 浏览器兼容性差, 看开发者的修订log就知道了, 每次新浏览器出来, 都可能出现一些兼容性问题;
- 性能不理想, 因为要完全模拟光标/选取, 甚至控制排版, 导致编辑大文件卡顿严重;
- 工作量巨大, 需要持之以恒, 反复调试, 很不容易.
当然, 上面这几个其实都是很优秀的作品, 也大量使用在线上产品, 所以对于研究和开发编辑器都是参考榜样.
作为最原始的"网页编辑器", textarea仍是使用率最高的, 比如github上的markdown编辑区域, 博客园. textarea作为编辑器优势:
- 文本样式单一, 样式通过标记描述, 写作不容易分心;
- 简单可依赖;
但劣势也很明显:
- 没有语法高亮支持;
- 没有键盘控制(快捷键)等;
- 没有自动完成, 代码片段等;
除了"语法高亮"有点困难外, 其他劣势通过js可以弥补.
所以编辑器的基本需求就下面几点:
- 快捷键;
- 自动完成;
- 代码片段;
- 文本替换: 上面需求的基础, 即根据键盘输入, 替换已输入的文本.
针对上面的需求, 可以总结为下面几点开发工作:
以上是我两三年前的代码, 可能代码组织一般..
示例
把上面几个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编辑器吧~
结束
希望博客园开发同学考虑加上类似功能 😃
