使用Canvas元素作为文本区域

Question

我正在寻找一个简单明了的描述，如何使用画布元素来做类似于文本区域的操作。

我已经看到了像Ace这样的项目。只是想知道如何编写到该区域，就像它是一个文本区域一样。只有纯文本，没有花哨的东西。

提前感谢。

- Julio

---

输出文本，或者允许用户实际编写文本？如果是后者，为什么不使用文本区域？如果是前者，为什么不使用 div 元素？ - GolezTrol

据我所知，Ace并不使用<canvas>。它的前身Bespin曾经使用过，但是创作者们放弃了，因为很难做到完美。广泛认为，文本编辑是<canvas>元素的不适当用法。 - Alohci

Answer 1

Ace曾经是Mozilla Skywriter，之前又是Mozilla Bespin。

如果你愿意深入挖掘并基于它自己编写代码，那么Bespin的代码实际上非常简单易懂，但这有点像一个傻瓜任务。Canvas规范特别建议不要这样做：

作者应避免使用canvas元素实现文本编辑控件。这样做有很多缺点：

- 必须重新实现插入符号的鼠标定位。 - 必须重新实现插入符号的键盘移动（对于多行文本输入可能跨越多行）。 - 必须实现文本字段的滚动（对于长行水平滚动，对于多行输入垂直滚动）。 - 必须重新实现复制和粘贴等本机功能。 - 必须重新实现拼写检查等本机功能。 - 必须重新实现拖放等本机功能。 - 必须重新实现页面范围内的文本搜索等本机功能。 - 必须重新实现用户特定的本机功能，例如自定义文本服务。这几乎是不可能的，因为每个用户可能安装了不同的服务，并且可能存在无限数量的此类服务。 - 必须重新实现双向文本编辑。 - 对于多行文本编辑，必须为所有相关语言实现换行。 - 必须重新实现文本选择。 - 必须重新实现拖动双向文本选择。 - 必须重新实现平台本机键盘快捷键。 - 必须重新实现平台本机输入法编辑器（IME）。 - 必须重新实现撤消和重做功能。 - 必须重新实现辅助功能，例如插入符号或选择后的放大。这是一项巨大的工作，建议作者尽可能避免使用它们，而应改用input元素、textarea元素或contenteditable属性。

- Simon Sarris

---

我想要像Sublime一样允许多选。我觉得从头开始构建自己的文本输入小部件并使用Canvas会比修改现有的文本小部件更容易实现这一点。你不同意吗？ - ArtOfWarfare

Answer 2

使用Chrome检查实时演示，可以看到它们使用div和span来实现这一点。闪烁的光标是一个div，似乎定期在隐藏和可见之间切换。我认为他们只需从事件中检查按下的键并将其写入相应行的span即可。

- Dan

---

谢谢你的回答。它确实给了我一些想法。你认为他们如何在文本的特定位置将光标放置在特定的div/span中？至于这个问题，重新编辑特定的div/span元素又该怎么做呢？ - Julio

我再次仔细查看了一下，似乎还涉及到一个文本区域。看起来文本区域会在你点击的位置移动，然后你在文本区域中输入内容，文本区域也会随之移动。我在窗口中输入了一些内容，发现元素样式属性 left 增加了。这确实需要很多调试才能使其正常工作。 - Dan