私はエースがどのように機能するかにかなり興味をそそられます。
クリックまたは矢印キーを押すことで、div/spans 内の各文字間でカーソルを移動できる方法に興味があります。
また、選択したときにテキストのハイライトがどのように機能するかにも興味があります(デモでは灰色がかったようなものです)
誰かがこれらの問題に光を当てることができれば幸いです。
前もって感謝します。
Ace では、基本的に DOM を描画 API として扱います。表示されるものはすべて、絶対配置された DIV 要素と SPAN 要素を使用して「描画」されます。テキストは SPAN を使用して描画され、線 (カーソルや選択範囲など) は DIV などです。
すべてを正しく配置するために、まず文字の高さと幅を測定します。これが、Ace が等幅フォントでのみ機能する理由でもあります。
Ace の内側をクリックすると、getBoundingClientRectを使用してエディター内のマウスの相対位置を計算し、測定した文字サイズを使用してこれを文字位置に変換します。キーボードでの移動も同様です。
デモ ページを調べて矢印キーを押してカーソルを移動すると、カーソル div の style.left 属性が適切な方向に 7px 移動します。上下は 15px で、テキストを表示するために使用されるスパンの正確なサイズです。
選択のために、絶対位置に配置されるクラス名 ace_selection の div を使用しています。
詳しく調べるには、chrome または firefox でデモを調べることをお勧めします。新しい div を作成し、実行するすべてのアクションで div の属性を変更する方法を確認できます。