创建基于 <canvas> 的 HTML5 文本编辑器 [关闭]答案

【问题标题】：Creating <canvas> based HTML5 text editor [closed]创建基于 <canvas> 的 HTML5 文本编辑器 [关闭]
【发布时间】：2012-09-14 12:59:31
【问题描述】：

我正在使用 HTML5 画布制作文本编辑器，通过它我可以更新文本、更改字体、移动字体和移动背景图像。

我需要有关在画布中移动文本的帮助 - 如何使用上下文和鼠标移动来完成活动？

【问题讨论】：

请不要滥用粗体格式。当您将整个内容加粗时，只会使您的问题难以阅读。
查看 Carota (earwicker.com/carota)。似乎基于画布的文本编辑器是一个已实现的梦想。我还没有太多使用它，但我计划将它合并到我正在构建的站点中。它将文本保存为带有格式属性的 JSON。简单而完美。

标签： html html5-canvas wysiwyg

【解决方案1】：

画布本身的 w3c 草案建议不要这样做。你可以在canvas best practices阅读这篇文章

Authors should avoid implementing text editing controls using the canvas 
element. Doing so has a large number of disadvantages

[...]

This is a huge amount of work, and authors are most strongly encouraged 
to avoid doing any of it by instead using the input element, the textarea 
element, or the contenteditable attribute.

如果您需要文本编辑器，可以查看其他免费计划，例如 CodeMirror

【讨论】：

感谢您的“contenteditable”，看起来正是我所需要的！
输入元素和文本区域不能有任意格式，并且在移动平台上对 contenteditable 的支持很糟糕
当您从 w3c 草案中阅读 canvas 的缺点时，它只建议不要“因为它需要大量工作”来重建所有功能。 w3c 看起来并不知道编码器是如何工作的！好吧，您并不总是需要所有功能，尤其是对于一些简单的需求。还有一些非常不错的纯 js 实现。

【解决方案2】：

编辑：这个答案写于 2012 年。从那时起，现代网络浏览器已经走了很长一段路，但答案不再适用。 Google Docs 和 Visual Studio Code 都使用基于<canvas> 的编辑。出于历史目的，将这个答案留在这里。 Here is a good thread on Hacker News on the topic.

不推荐使用 HTML5 <canvas> 进行文本编辑（请参阅 jbalsas 上面的答案）。 Mozilla Bespin (Skywriter) 是一个尝试，直到它被关闭并且开发转移到非基于<canvas> 的 ACE 编辑器：

https://mozillalabs.com/en-US/skywriter/

http://ace.ajax.org/

Atom 编辑器选择非画布方式，最终选择 React.js 来加速 DOM 更新过程：

http://blog.atom.io/2014/07/02/moving-atom-to-react.html

但是，即使不推荐，基于<canvas> 的编辑也是可能的，请参阅下面的 cmets 和 jeromeyers 的评论：

http://earwicker.com/carota/

...also this blog post contains some ideas when DOM based text editing might not work.

【讨论】：

我给这个答案一个-1，因为它根本不是真的。 Mozilla确实做到了，其他人也可以做到。他们的画布实现功能齐全且速度极快。他们最终放弃了它，因为他们发现基于 DOM 的实现对于他们的特定目标更灵活，但这并不意味着 OP 应该这样做。他可能有不同的目标。如果可以的话，我也会给这个答案另一个-1，因为它试图让人们相信他们不能做Mozilla不能做的事情。这简直是荒谬的。
是的，让我们不鼓励对我们之前任何人尝试过的任何事情进行任何工作。我相信这会带我们去很棒的地方。
如果您认为可行，我建议您如何发布答案。
Canvas 支持鼠标事件。您可以委托他们做什么。在任何文本编辑器的代码中，都会有从鼠标点击的 (x,y) 到文档中的 (row,col) 的翻译。 Canvas 的文字渲染也不错。如果您需要更好的质量，您可以随时进行过度采样。我不相信有人会“推荐”用于文本控件的 DOM（在输入元素/内容可编辑之外），但 CodeMirror 做得很好。
查看 Carota (earwicker.com/carota)。似乎基于画布的文本编辑器是一个已实现的梦想。我还没有太多使用它，但我计划将它合并到我正在构建的站点中。它将文本保存为带有格式属性的 JSON。简单而完美。