最新

嗨，HN！我一直对现代的 WYSIWYG 编辑器感到非常沮丧，于是开始尝试构建自己的编辑器。<p>我遇到的问题很简单：我想要一种低技术含量的方式来输入带样式的文本，但我不想加载一个复杂的 500KB 的库，尤其是在同一个页面上要初始化几十次的情况下。<p>纯 &lt;textarea&gt; 中的 Markdown 是一个比完整的 WYSIWYG 更好的选择，但它的主要缺点是，在没有任何格式的情况下，它看起来很丑陋。我可以接受，但我的客户肯定不行。<p>我深入研究了 ContentEditable 几年，但最终意识到别人已经比我做得更好了。<p>我一直在思考这个问题：为什么我不能拥有一个简单、高效、美观的 Markdown 编辑器？我见过的最好的解决方案是 Ghost 的分屏编辑器：左边是 Markdown，右边是预览，并带有同步滚动。<p>然后，大约一年前，我脑海中闪过一个想法：如果我们在一块 &lt;textarea&gt; 后面叠加一个预览窗格会怎么样？如果我们将它们完美对齐，那么即使你只编辑纯文本，它看起来和感觉也像是在编辑富文本！<p>当然，也会有一些缺点：你必须使用等宽字体，所有内容都必须使用相同字号，并且所有 Markdown 标记都必须显示在最终预览中。<p>但这些都是我可以接受的权衡。<p>总之，版本 1 进展得并不顺利……事实证明，保持 textarea 和渲染的预览对齐比我想象的要难。这是我发现的：<p>- 列表很难对齐 - 项目符号会破坏字符对齐。使用 HTML 实体（• 用于项目符号）解决，以保持等宽<p>- 并非所有等宽字体都是真正的等宽字体 - 粗体和斜体文本即使在“等宽”字体中也可能具有不同的宽度，从而破坏了完美的叠加<p>- 嵌入是一个噩梦 - 来自父页面的任何继承 CSS（边距、填充、行高）都会改变对齐。即使是 1px 的偏移也会完全破坏这种错觉<p>解决方案是进行强迫症式的规范化：<p><pre><code> &#x2F;&#x2F; 整个技巧：一个透明的 textarea 覆盖在预览 div 上 layerElements(textarea, preview) applyIdenticalSpacing(textarea, preview) &#x2F;&#x2F; 使 textarea 不可见，但保留光标 textarea.style.background = &#x27;transparent&#x27; textarea.style.color = &#x27;transparent&#x27; textarea.style.caretColor = &#x27;black&#x27; &#x2F;&#x2F; 保持它们同步 textarea.addEventListener(&#x27;input&#x27;, () =&gt; { preview.innerHTML = parseMarkdown(textarea.value) syncScroll(textarea, preview) }) </code></pre> 一周前，我开始尝试版本 2，并发现了 GitHub 的 &lt;markdown-toolbar&gt; 元素，它在纯 &lt;textarea&gt; 中很好地处理了 Markdown 格式。<p>这个实验变成了 OverType (<a href="https:&#x2F;&#x2F;overtype.dev" rel="nofollow">https:&#x2F;&#x2F;overtype.dev</a>)，我今天向你展示它——它是一个富 Markdown 编辑器，实际上只是一个 &lt;textarea&gt;。关键的见解是，一旦你解决了对齐挑战，你就可以免费获得所有原生 textarea 提供的功能：撤销/重做、移动键盘、可访问性和原生性能。<p>到目前为止，它在浏览器和移动设备上的表现都出奇地好。我得到了一个小型包（总共 45KB）中的高性能富文本编辑功能。这有点傻，但它有效！我计划在我的所有项目中使用它，并且我想保持它的简单和极简。<p>如果你能试用一下，并告诉我你对它的看法，我将非常高兴。编辑愉快！<p>---<p>演示和文档：<a href="https:&#x2F;&#x2F;overtype.dev" rel="nofollow">https:&#x2F;&#x2F;overtype.dev</a><p>GitHub：<a href="https:&#x2F;&#x2F;github.com&#x2F;panphora&#x2F;overtype" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;panphora&#x2F;overtype</a>