返回首页
最新
我刚刚发布了DNC（DIAC NET CHAIN）的开源测试版，这是一个基于Python的去中心化经济系统，没有全球区块链。每个节点都充当钱包、矿工和验证者，具备局域网和广域网发现、挖矿指标、基本图形用户界面、信誉评分、基于守护者的恢复机制，以及一个可运行的存储证明演示。同时，还提供了Windows平台的编译.exe文件。该代码库完全开放——欢迎大家进行分叉、测试、破坏，并提出或构建对用户界面、节点协议、恢复逻辑或新功能的改进建议。特别感谢对稳定和扩展核心协议的贡献。
GitHub: <a href="https://github.com/POlLLOGAMER/DNC-DIAC-NET-CHAIN" rel="nofollow">https://github.com/POlLLOGAMER/DNC-DIAC-NET-CHAIN</a>
嗨，HN！我对现代的所见即所得（WYSIWYG）编辑器感到非常沮丧，因此我开始尝试自己构建一个。
我遇到的问题很简单：我想要一种低技术的方式来输入格式化文本，但我不想加载一个复杂的500KB库，尤其是在同一页面上需要初始化多次的情况下。
在普通的 `<textarea>` 中使用 Markdown 是一个比完整 WYSIWYG 更好的替代方案，但它的主要缺点是没有任何格式时看起来很丑。我可以接受，但我的客户肯定无法接受。
我在可编辑内容（ContentEditable）方面探索了几年，但总是意识到别人解决这个问题的方式比我想象的要好得多。
我不断回到这个问题：为什么我不能拥有一个简单、高效、美观的 Markdown 编辑器？我见过的最好的解决方案是 Ghost 的分屏编辑器：左侧是 Markdown，右侧是预览，并且支持同步滚动。
大约一年前，我脑海中闪现了一个想法：如果我们在 `<textarea>` 后面叠加一个预览窗格会怎样？如果我们将它们完美对齐，那么即使你只是在编辑纯文本，它看起来和感觉起来也像是在编辑富文本！
当然，这样做会有一些缺点：你必须使用等宽字体，所有内容必须使用相同的字体大小，并且所有的 Markdown 标记必须在最终预览中显示。
但这些都是我可以接受的权衡。
总之，版本 1 的效果并不好……事实证明，保持 `<textarea>` 和渲染预览的对齐比我想象的要难。以下是我发现的问题：
- 列表对齐困难 - 项目符号会影响字符对齐。通过使用保持等宽的 HTML 实体（• 作为项目符号）解决了这个问题。
- 并非所有等宽字体都是真正的等宽 - 即使在“等宽”字体中，粗体和斜体文本的宽度也可能不同，打破了完美的叠加效果。
- 嵌入是个噩梦 - 从父页面继承的任何 CSS（边距、内边距、行高）都会导致对齐偏移。即使是 1 像素的偏移也会彻底破坏这种错觉。
解决方案是进行强迫规范化：
```javascript
// 整个技巧：在预览 div 上叠加一个透明的 textarea
layerElements(textarea, preview)
applyIdenticalSpacing(textarea, preview)
// 使 textarea 隐形，但保持光标可见
textarea.style.background = 'transparent'
textarea.style.color = 'transparent'
textarea.style.caretColor = 'black'
// 保持它们同步
textarea.addEventListener('input', () => {
preview.innerHTML = parseMarkdown(textarea.value)
syncScroll(textarea, preview)
})
```
一周前，我开始尝试版本 2，并发现 GitHub 的 `<markdown-toolbar>` 元素，它在普通的 `<textarea>` 中处理 Markdown 格式化非常好。
这个实验变成了 OverType（[https://overtype.dev](https://overtype.dev)），今天我向你们展示的就是这个——它是一个富 Markdown 编辑器，实际上只是一个 `<textarea>`。关键的见解是，一旦你解决了对齐问题，你就可以免费获得所有原生 textarea 提供的功能：撤销/重做、移动设备键盘、可访问性和原生性能。
到目前为止，它在各个浏览器和移动设备上表现得相当不错。我在一个小包（总共 45KB）中获得了高效的富文本编辑。这有点傻，但它确实有效！我计划在我所有的项目中使用它，并希望保持简单和简约。
如果你能试用一下，并告诉我你的想法，我会非常高兴。祝你编辑愉快！
---
演示和文档：[https://overtype.dev](https://overtype.dev)
GitHub：[https://github.com/panphora/overtype](https://github.com/panphora/overtype)