Hacker News 中文摘要

RSS订阅

Show HN: OverType——一个仅作为文本区域的Markdown所见即所得编辑器 -- Show HN: OverType – A Markdown WYSIWYG editor that's just a textarea

原文链接 | HN讨论 | 2025-08-18 09:51:18

文章摘要

OverType是一款基于Markdown的WYSIWYG编辑器，其核心特点是仅使用一个简单的文本区域（textarea）实现所见即所得的编辑功能，简化了用户操作界面。

文章总结

标题：OverType——一个仅使用文本区域的Markdown所见即所得编辑器

主要内容：

OverType是一款创新的Markdown所见即所得（WYSIWYG）编辑器，其核心思想是通过在文本区域（<textarea>）上叠加一个预览面板来实现富文本编辑的效果。开发者Panphora在经历了对现代WYSIWYG编辑器的失望后，决定自己动手打造一个轻量级、高性能的Markdown编辑器。

开发背景： Panphora希望找到一种低技术含量的方式来编辑带样式的文本，但又不愿意加载复杂的500KB库，尤其是在同一页面需要多次初始化的情况下。虽然Markdown在纯文本区域中是一个不错的替代方案，但其未格式化的外观对用户不够友好。经过多年的探索，Panphora最终提出了一个简单的解决方案：在文本区域背后叠加一个预览面板，通过精确对齐，使得用户在编辑纯文本时，能够看到富文本的预览效果。

技术挑战与解决方案： 1. 对齐问题：列表、项目符号等元素的对齐较为复杂，Panphora通过使用HTML实体（如•）来保持等宽字体的一致性。 2. 字体问题：并非所有等宽字体都真正等宽，粗体和斜体文本的宽度可能会有所不同，导致对齐失效。Panphora通过严格的标准化解决了这一问题。 3. 嵌入问题：父页面的CSS样式（如边距、内边距、行高等）会影响对齐，即使1像素的偏移也会破坏整体效果。Panphora通过应用相同的间距和对齐方式，确保文本区域和预览面板的完美同步。

核心代码： ```javascript // 关键技巧：在预览面板上叠加透明的文本区域 layerElements(textarea, preview) applyIdenticalSpacing(textarea, preview)

// 使文本区域透明，但保留光标 textarea.style.background = 'transparent' textarea.style.color = 'transparent' textarea.style.caretColor = 'black'

// 保持同步 textarea.addEventListener('input', () => { preview.innerHTML = parseMarkdown(textarea.value) syncScroll(textarea, preview) }) ```

版本迭代： 在开发过程中，Panphora发现了GitHub的<markdown-toolbar>元素，它能够很好地处理文本区域中的Markdown格式化。这一发现促成了OverType的诞生，最终版本仅45KB，支持撤销/重做、移动键盘、无障碍访问等功能，并且在跨浏览器和移动设备上表现良好。

未来计划： Panphora计划在所有项目中使用OverType，并保持其简洁和轻量。他邀请用户试用并提供反馈。

相关链接： - 演示与文档：https://overtype.dev - GitHub仓库：https://github.com/panphora/overtype

用户反馈： 用户对OverType的简洁性和创新性表示赞赏，但也提出了一些改进建议，如支持图片嵌入、自动完成功能等。总体而言，OverType被认为是一款轻量且高效的Markdown编辑器，适合多种应用场景。

评论总结

  1. 关于项目是否为WYSIWYG编辑器的争议

    • 评论1和评论2指出该项目并非真正的WYSIWYG编辑器，因为它缺乏图像预览功能，并且保留了格式化符号。
    • 引用：
      • "If it were a WYSIWYG editor, there'd be previews for images."（如果是WYSIWYG编辑器，应该有图像预览。）
      • "This isn't really WYSIWYG because it keeps the formatting symbols like * or # etc."（这不是真正的WYSIWYG，因为它保留了*或#等格式化符号。）

  2. 对项目轻量化的认可

    • 评论3和评论6提到项目体积小，分别为912字节和2kb，体现了其轻量化特点。
    • 引用：
      • "912 bytes...."（912字节……）
      • "2kb"（2kb）

  3. 对文档和功能的评价

    • 评论4提到项目有12页文档，但实际功能仅为一个文本区域，作者表示愿意尝试。
    • 引用：
      • "12 pages of docs vs it’s a textarea. Great job, gonna try it out."（12页文档对比它只是一个文本区域。干得好，我会试试。）

  4. 对浏览器内代码编辑器的需求

    • 评论5询问是否有支持多语言颜色编码的浏览器内代码编辑器。
    • 引用：
      • "Anyone knows a good in browser coding editor widget? That supports color coding for different languages?"（有人知道一个好的浏览器内代码编辑器小部件吗？支持不同语言的颜色编码。）