Text 如何从头创建一个非常简单的文本编辑器？

假设我想创建一个简单的文本编辑器。它不需要特别的东西，它应该像记事本一样。并且，假设我想从头开始创建它：为了方便起见，让我们假设我拥有一个类似Canvas的工具（我的意思是在浏览器中工作的工具）。对于那些不熟悉canvas的人，下面让我们快速了解一下

但这项技术并不重要：关键是，我可以在屏幕上的特定坐标处放置一些文本，设置颜色和字体，并将其在框中左右对齐，这基本上就是我使用可用工具所能做的。这些工具不知道如何换行或选择文本，而且一旦我将文本放到屏幕上，它就会变成一堆像素——例如，无法更新文本或轻松删除最后一个字符

现在，不像你们这里的大多数聪明人，我从来没有创建过文本编辑器。 我的问题是：

每个文本编辑器设计者都会面对哪些模式

出现了哪些典型问题

我应该避免解决哪些问题，因为我可以移植或复制解决方案？（就像我说的，我在画画布。）

---

这是一种不赞成尝试在画布上做的事情。HTML5画布规范本身强烈建议不要尝试这样做。正如规范所说：

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

• 必须重新实现插入符号的鼠标放置
• 必须重新实现插入符号的键盘移动（对于多行文本输入，可能跨行移动）
• 必须实现文本字段的滚动（对于长行，水平滚动；对于多行输入，垂直滚动）
• 必须重新实现复制和粘贴等本机功能
• 必须重新实现本地功能，如拼写检查
• 必须重新实现拖放等本机功能
• 必须重新实现页面范围的文本搜索等本机功能
• 必须重新实现特定于用户的本机功能，例如自定义文本服务。这几乎是不可能的，因为每个用户可能安装了不同的服务，并且可能存在无限多的此类服务
• 必须重新实现双向文本编辑
• 对于多行文本编辑，必须为所有相关语言实现换行
• 必须重新执行文本选择
• 必须重新实现双向文本选择的拖动
• 必须重新实现平台本机键盘快捷键
• 必须重新实现平台本机输入法编辑器（IME）
• 必须重新实现撤消和重做功能
• 必须重新实现辅助功能，如插入符号或选择后的放大

在画布中实现这类事情是一场噩梦，特别是在今天，相同的字体不仅在每个浏览器中看起来不同，而且在呈现字体的画布和呈现字体的浏览器之间看起来也不同

我建议您看看Mozilla Bespin的代码，它是在画布上制作的。它最终变成了Mozilla Skywriter，后来他们说“Welp canvas是这个工作的错误工具”，放弃了，并与Ace合并，后者不使用canvas，而是使用DIVs。如果您真的对这类事情感兴趣，那么我强烈建议您查看这些项目的代码。当我刚开始使用Canvas时，bespin代码对我帮助很大

---

底线是，如果您正在进行文本编辑，请（暂时）在画布上使用div和input以及其他HTML元素。不要试图在画布上模仿它。不管怎样，你都可以尝试，但是你会玩得很不开心，你的用户也一样

至于画布上的多行文字，此时您必须自己计算。您甚至需要近似文本高度

---

---

我对实际实现一个简单编辑器的建议是：拥有一个画布，绘制一些文本，可能在一些复杂的图形上。当您想要编辑文本时，可能通过单击图形，在单击事件上显示（多行或非多行）HTML输入元素。按enter键、escape键或方框失去焦点（模糊事件）时，提交更改。

此链接可能会有所帮助：我想我的问题更多的是理论方面的。我真的不需要富文本编辑。我只需要文本编辑。关于这项技术，我想你可以使用像WinAPI那样的richedit控件。您可以增量添加文本、修改文本（删除、更改功能）、仅修改选定文本、复制到剪贴板、添加字体、颜色、甚至URL等。。。像简单的编辑器这样实现起来并不太难。谢谢你的回答。实际上我只是看着贝斯平，但我不知道他们后来放弃了。