javascript - キャンバス要素をテキストエリアとして使用する

Question

テキスト領域のようなキャンバス要素の使用方法の簡単な説明を探しています。

Aceなどのプロジェクトを見てきました。テキストエリアのようにエリアに書き込む方法を考えてみてください。プレーンテキストだけで、派手なものは何もありません。

前もって感謝します。

Answer 1

Ace は Mozilla Skywriter で、Mozilla Bespin でした。

Bespin のコードは、掘り下げてそれに基づいて独自のコードを作成する意思がある場合、実際には非常に簡単に理解できますが、それは一種のばかげた用事です。Canvas の仕様では、実際にはこれに対して具体的にアドバイスしています。

作成者は、canvas 要素を使用してテキスト編集コントロールを実装することを避ける必要があります。そうすることには、多くの欠点があります。

キャレットのマウス配置を再実装する必要があります。

キャレットのキーボード移動を再実装する必要があります (複数行のテキスト入力の場合、複数行にわたる可能性があります)。

テキスト フィールドのスクロールを実装する必要があります (長い行の場合は水平方向、複数行入力の場合は垂直方向)。

コピー アンド ペーストなどのネイティブ機能を再実装する必要があります。

スペル チェックなどのネイティブ機能を再実装する必要があります。

ドラッグ アンド ドロップなどのネイティブ機能を再実装する必要があります。

ページ全体のテキスト検索などのネイティブ機能を再実装する必要があります。

ユーザー固有のネイティブ機能 (カスタム テキスト サービスなど) を再実装する必要があります。各ユーザーには異なるサービスがインストールされている可能性があり、そのようなサービスには無限のセットがあるため、これはほぼ不可能です。

双方向テキスト編集を再実装する必要があります。

複数行のテキスト編集では、関連するすべての言語に対して行の折り返しを実装する必要があります。

テキスト選択を再実装する必要があります。

双方向のテキスト選択のドラッグを再実装する必要があります。

プラットフォーム ネイティブのキーボード ショートカットを再実装する必要があります。

プラットフォーム ネイティブのインプット メソッド エディター (IME) を再実装する必要があります。

元に戻す機能とやり直し機能を再実装する必要があります。

キャレットまたは選択に続く拡大などのアクセシビリティ機能を再実装する必要があります。これは膨大な量の作業であり、作成者は、代わりに input 要素、textarea 要素、または contenteditable 属性を使用して、それを行わないようにすることを強くお勧めします。

Answer 2

Chrome を使用してライブ デモを調べると、これを実現するために div と span を使用していることがわかります。点滅するカーソルは、定期的に非表示と表示が切り替わるように見える div です。イベントから押されたキーをチェックし、その行の対応するスパンに書き込むだけだと思います。