Typecho 的 Markdown 编辑器终于有了滚动跟随

编辑器

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

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

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

基本原理

Photo 14-12-2017, 5 17 51 PM.jpg

要做到平滑滚动其实要涉及的点非常多,包括还需要对 Markdown 的解析库做改造,将它的 HTML 块与代码行对应起来,然后还有间距空白的滚动处理等等。但是最基础的一点,即怎么把 TEXTAREA 里的滚动高度与行数关联起来,却可以用上面这张示意图来展示。

先创建一个特殊的 div,这个 div 的排版和尺寸 CSS 样式完全拷贝自 textarea,这样可以保证他们的字符排版效果一致。然后将字符串按换行符切割,将切割出来的每一行字符串放入刚刚创建的 div 里去,这样就可以得出这一行字符在实际的 textarea 中的占用高度。然后 repeat 这个步骤,我们就可以得到一个由每一行高度组成的数组了。

这样当 textarea 在滚动的时候,我们根据滚动的高度在数组里就可以查出来,现在最上方是滚到哪一行了。

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

已有 10 条评论

  1. LInger LInger

    厉害了,支持一下

  2. DoubleWorld DoubleWorld

    太喜欢这功能了,我是MD党,希望能够更多方便的快捷方式

  3. Flyer Flyer

    这个不错

  4. 明月登楼学习笔记 明月登楼学习笔记

    希望 Typecho 多多增强 MarkDown ,这个绝对是 Typecho 的利器!写作离不开 MarkDown 语法的支持的!

  5. Jrotty Jrotty

    哇,这个硬伤终于解决了,这就升级开发板233

  6. Kioto Kioto

    作为Live Writer重度用户,能不能优化一下0.9之后无法通过WLR上传图片的问题?谢谢了。

  7. 夏目贵志 夏目贵志

    不错!

  8. LightShell LightShell

    大写的赞。我要去看看。

  9. 明月登楼学习笔记Blog 明月登楼学习笔记Blog

    好吧,我也是昨天才知道,编辑器需要是全屏模式才可以有这个的!囧!

  10. hongweipeng hongweipeng

    原生支持了太棒了,我之前为了实时预览,做了EditorLR插件,也是同步左右滚动条的。我的处理方法是获得它的 $().scrollHeight 和 $().offsetHeight 。就能得到它的滚动条占比高。通过这个占比去调整另一边的滚动条的。