假设我想创建一个简单的文本编辑器。它并不需要有任何特别的东西，它大多应该像记事本。并且，说我想从头开始创建它：为方便起见，我想拥有一个像Canvas这样的工具（我认为是在浏览器中工作的工具）。对于那些不熟悉画布的人，请快速查看what it can do with text。
但技术并不重要：关键是，我可以在屏幕上的某些坐标处放置一些文字，设置颜色和字体并将其左右对齐放在其框中，这基本上就是我能做的所有事情可用的工具。这些工具不知道如何自动换行或选择文本，而且只要我将文本放在屏幕上就会变成一堆像素 - 没有办法更新文本或轻松删除最后一个字符，示例
现在，与大多数聪明人不同，我从未创建过文本编辑器。 我的问题是：
答案 0 :(得分：3)
在Canvas尝试做的时候，这有点令人不悦。 HTML5 Canvas规范本身强烈建议不要尝试这样做。正如规范所说：
作者应避免使用canvas元素实现文本编辑控件。这样做有很多缺点：
- 必须重新实现插入符号的鼠标放置。
- 必须重新实现插入符号的键盘移动（可能跨行，用于多行文本输入）。
- 必须实现文本字段的滚动（水平对于长行，垂直对于多行输入）。
- 必须重新实现复制和粘贴等原生功能。
- 必须重新实现拼写检查等原生功能。
- 必须重新实现拖放等原生功能。
- 必须重新实现页面范围文本搜索等原生功能。
- 必须重新实现特定于用户的本机功能，例如自定义文本服务。这几乎是不可能的，因为每个用户可能安装了不同的服务，并且存在一组无限可能的此类服务。
- 必须重新实现双向文本编辑。
- 对于多行文字编辑，必须为所有相关语言实施换行。
- 必须重新实现文本选择。
- 必须重新实现拖动双向文本选择。
- 必须重新实现平台原生键盘快捷键。
- 必须重新实现平台本机输入法编辑器（IME）。
- 必须重新实现撤消和重做功能。
- 必须重新实现辅助功能，例如插入符号后的放大或选择。
在Canvas中实现这些东西是一个噩梦，特别是在今天，相同的字体不仅在每个浏览器中看起来不同，而且在渲染字体的Canvas和渲染字体的浏览器之间看起来不同。
我建议你看一下用画布制作的Mozilla Bespin的代码。它最终成为了Mozilla Skywriter，然后最终他们说“Welp canvas是这项工作的错误工具”，放弃了，并与Ace合并，后者不使用Canvas而是使用DIV。如果您真的对这类事情感兴趣，那么我强烈建议您查看这些项目的代码。当我刚刚开始使用Canvas时，bespin代码对我帮助很大。
最重要的是，如果您正在进行文本编辑，请在画布上使用DIV和输入以及其他HTML元素（临时）。不要试图在画布上模仿它。无论如何你都可以尝试，但是你的时间也会很糟糕，而你的用户也是如此。
就画布上的多行文字而言，你必须自己计算它。你甚至需要近似文本高度。
我对实际实现一个简单编辑器的建议是这样的：有一个画布，有一些文字绘制，也许在一些复杂的数字上。当您想要编辑文本时，可能通过单击图形，在click事件上显示（多行或不多行）HTML Input元素。按Enter键或转义，或失去焦点的框（blur事件），提交更改。