html - 作成ベースの HTML5 テキスト エディタ

Question

テキストの更新、フォントの変更、フォントの移動、背景画像の移動が可能な HTML5 キャンバスを使用してテキスト エディターを作成しています。

キャンバス内のテキストの移動について助けが必要です - マウス移動イベントでコンテキストを使用してどのように行うことができますか?

Answer 1

キャンバス自体の w3c ドラフトでは、これを行わないことを推奨しています。これは、キャンバスのベスト プラクティスで読むことができます

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などの他の無料のイニシアチブを見ることができます。

Answer 2

編集: この回答は 2012 年に作成されました。それ以来、最新の Web ブラウザーは長い道のりを歩んできましたが、その回答は当てはまりません。Google Docs と Visual Studio Code はどちらも<canvas>ベース編集を使用します。歴史的な目的のためだけに、この回答をここに残します。このトピックに関する Hacker News の良いスレッドを次に示します。

テキスト編集に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>、推奨されていなくても、ベースの編集は可能です。以下のコメントと jeromeyers からのコメントを参照してください。

http://earwicker.com/carota/

...また、このブログ投稿には、DOM ベースのテキスト編集が機能しない可能性がある場合のいくつかのアイデアが含まれています。