预览
在线体验 https://harrychen0506.github.io/react-markdown-editor-lite/
特点
- 轻量、基于React
- UI可配置, 如只显示编辑区或预览区
- 支持常用的markdown编辑功能，如加粗，斜体等等…
- 支持编辑区和预览区同步滚动
- 支持图片上传
开发心得
-
文本编辑
大多数常见的编辑器，包括富文本编辑器，利用了某些元素如div的contenteditable属性，配合selection、range、execCommand等API，实现了富文本编辑功能。这里面的实现比较复杂，所以有了"为什么都说富文本编辑器是天坑？"这个说法。
而markdown编辑器，核心的处理内容为简单语法的纯文本，复杂度相对来说比较低，并且input标签自带onSelect事件，可以很方便的获取选择信息（选择起始位置和选择文本值），因此要想实现编辑功能，只需将要改动的内容进行文本转换，然后进行重新拼接首尾，大功告成。
-
markdown解析
考察了几个社区流行的markdown解析器，比较流行的有markdown, markdown-it, marked 等等。综合考虑扩展性以及稳定性，笔者选择了markdown-it作为markdown的词法解析器，结果也比较满意。
-
同步滚动
当选择分栏编辑的时候，滚动左侧的编辑区，右侧的预览区能自动滚动到对应的区域。方案参考了《手把手教你用 100行代码实现基于 react的 markdown 输入 + 即时预览在线编辑器（一）》。只需先计算出输入框容器元素与预览框容器元素之间最大scroll范围的比例值，然后根据主动滚动元素自身的scrollTop做相应的比例换算，即可知道对方区域的scrollTop值。
-
关于UI
- 项目的字体库选择了Font Awesome风格，并且只选取了项目所需要的一些图标。
- 编辑器的整体css均可通过全局覆盖的形式进行自定义。目前暂时只支持灰色主题。
- 编辑器的显示区域包括菜单栏，编辑器，预览区，工具栏，通过配置组件的config属性，可以选择默认的展示区域。