google docs textcursor

Question

Googleドキュメントに似たアプリケーションを作成する必要があります。私は、Google Docsはテキストエリアを使用せず、ページを作成するために通常のdivを使用することを見てきました。しかし、私が知らないのは、彼らがどのようにテキストカーソルを得ることができるかということです。画像が点滅していますか？私がクローム開発ツールを使ってウェブページのコードを見ようとしたときに画像が表示されなかったためです。どうやってやっているの？

Answer 1

Googleドキュメントは独自の編集方法を使用しています。 contentEditableをオンにしたテキストはありませんが、すべてがDOMを使用してレンダリングされます。それはキーストロークを待ち受け、DIVを操作します。

カーソルは、プログラムによって隠されている、または表示されている、絶対位置のDIVです。 "kix-cursor-caret"という名前のクラスを検索します。

編集者はKixというコードネームで表示されています。https://github.com/benjamn/kix-standalone