虽然这个效果在很多所见即所得的 Markdown 编辑器里几乎是标配,但是对 Typecho 来说却是十分困难,因为我们的编辑器是基于原生的 textarea 组件,给大家带来了爽快输入响应的同时也牺牲了很多灵活性。

937199656.gif

  • 注: Typecho 编辑器必须是在“全屏”下才会在右边显示 MarkDown 语法同步预览的哦!

特别是对于自动跟随这种效果来说最重要的一点,需要把左侧输入框的滚动高度和行号与右侧的实时输出效果的 HTML 块一一对应起来,并且自动检测左侧滚动到哪一行了(注意:编辑器是可以行内折行的,也就是软换行),这几乎是不可能做到的,实际上据我所知也没有人做过。因为 textarea 没有方法来检测每一行占用了多少高度。

但很难做到并不代表无法做到,经过几天时间的努力(主要是要达到平滑的效果调试起来太花时间),我为 Typecho 加入了这样一个效果,左右两侧的文本可以滚动对应。

目前我已经将代码推送至 GitHub 上了,这个功能还在测试阶段,大家可以去下载开发版17.12.14,如果有 bug 请及时报告。

最后修改:2018 年 06 月 29 日
如果觉得我的文章对你有用,请随意赞赏