contentEditable divのキャレット位置を取得する方法は？

Question

私は自分のブログのウェブサイト用のテキストエディタを作っています。私は、テキストを選択したり、選択したテキストを太字または斜体にしたり、選択したテキストに色を付けたりするなど、テキストを選択してスタイルを適用することで、ブログ投稿を編集できる小さなツールボックスを提供したいと考えています。画像やビデオリンクを挿入するオプションもあります。

私はSOを検索しましたが、満足できる解決策を得ることができませんでした。

誰でも選択のためのキャレットの位置を見つけるのを助けることができれば（選択なしで）大変です。私はjQueryのキャレットプラグインを試しましたが、動作しません。

は私のコードは、（SOのみに記事を読んで、この到着した）次のようになります。

HTML：別のJSファイルで

<div id="editor" contentEditable="true"> 
    Initial text... 
</div> 

：私は取得しています

(function(){ 
$("#editor").bind("keydown keypress mousemove", function() { 
     alert("Current position: " + $(this).caret().start); 
    }); 
}()); 

ページがロードされ、キーを押すか何かイベントが発生しても何も起きないときは、火かき棒の次のエラー：

it

f.value未定義であると言い、私も

this linkを試みたが、元のdiv内の他のタグがある場合は、ここで提供される解決策は文句を言わない仕事します。

助けてください。また、より良い解決策や全く異なるアプローチがある場合は、私を案内してください。

Answer 1

jQueryキャレットプラグイン（私はあなたがthis oneを意味すると仮定します）は、テキスト入力とテキストエリアのみです。 contenteditable要素は非常に異なった働きをします。そのため、動作しません。

キャレットの位置や選択を文字オフセットの観点から指定したい場合は、一般的には何をしようとしているかのように、my answer hereが役立ちますが、これらの数字はあまり役に立ちません。 document.execCommand()を見ている必要があるかのように私に聞こえる。