明月登楼

Typecho 开发版17.12.14版 MarkDown 编辑器支持滚动跟随
虽然这个效果在很多所见即所得的 Markdown 编辑器里几乎是标配,但是对 Typecho 来说却是十分困难,因...
扫描右侧二维码阅读全文
08
2018/01

Typecho 开发版17.12.14版 MarkDown 编辑器支持滚动跟随

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

937199656.gif

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

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

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

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

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

发表评论

4 条评论

  1. xing-chuan

    我直接从 github clone 的源码,好像没包含这个所见即所得的编辑器

    1. 明月登楼
      @xing-chuan

      哈哈,编辑器必须是全屏下才会有同步预览在右边的!我也是很久才发现!官方竟然文档里都不提!

  2. 皮皮

    我的typecho站点是1.1版,额外安装一个插件来实现markdown编辑器,这个整合得好。

    1. 明月登楼
      @皮皮

      插件的 MarkDown 的话,兼容性太差了!一旦你停用插件,你的文章 MarkDown 解析就存在兼容性问题了!