1

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

Stack Overflow を検索しましたが、満足のいく解決策は得られませんでした。

誰かが選択のための（または選択なしで）キャレットの位置を見つけるのを手伝ってくれると助かります。jQuery caret プラグインを試しましたが、うまくいきません。

私のコードは次のようになります (スタック オーバーフローのみの投稿を読んで到着しました):

HTML:

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

別の JS ファイルで:

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

ページがロードされ、キープレスまたはイベントで何も起こらない場合、Firebug で次のエラーが発生します。

それは言います：

f.値は定義されていません

私もこのリンクを試しました

ただし、元の div 内に他のタグがある場合、ここで提供されるソリューションは機能しません。

助けてください。また、より良い解決策やまったく異なるアプローチがあれば、私を導いてください。

4

1 に答える 1

1

jQuery Caretプラグイン（これを意味すると思います）は、テキスト入力とテキストエリア専用です。コンテンツ編集可能な要素の動作は大きく異なるため、動作しません。

文字オフセットの観点からカレットの位置または選択が必要な場合は、ここでの私の答えが役立つ場合がありますが、一般的に、あなたがやろうとしているように聞こえる場合、これらの数値はあまり役に立ちません。あなたが見ている必要があるように私には聞こえますdocument.execCommand()。

于 2012-05-02T13:58:04.367 に答える