虽然这个效果在很多所见即所得的 Markdown 编辑器里几乎是标配,但是对 Typecho 来说却是十分困难,因为我们的编辑器是基于原生的 textarea 组件,给大家带来了爽快输入响应的同时也牺牲了很多灵活性。
- 注: Typecho 编辑器必须是在“全屏”下才会在右边显示 MarkDown 语法同步预览的哦!
特别是对于自动跟随这种效果来说最重要的一点,需要把左侧输入框的滚动高度和行号与右侧的实时输出效果的 HTML 块一一对应起来,并且自动检测左侧滚动到哪一行了(注意:编辑器是可以行内折行的,也就是软换行),这几乎是不可能做到的,实际上据我所知也没有人做过。因为 textarea 没有方法来检测每一行占用了多少高度。
但很难做到并不代表无法做到,经过几天时间的努力(主要是要达到平滑的效果调试起来太花时间),我为 Typecho 加入了这样一个效果,左右两侧的文本可以滚动对应。
目前我已经将代码推送至 GitHub 上了,这个功能还在测试阶段,大家可以去下载开发版17.12.14,如果有 bug 请及时报告。
4 条评论
我直接从 github clone 的源码,好像没包含这个所见即所得的编辑器
哈哈,编辑器必须是全屏下才会有同步预览在右边的!我也是很久才发现!官方竟然文档里都不提!
我的typecho站点是1.1版,额外安装一个插件来实现markdown编辑器,这个整合得好。
插件的 MarkDown 的话,兼容性太差了!一旦你停用插件,你的文章 MarkDown 解析就存在兼容性问题了!