contentEditableがtrueに設定されたdivがあります。
私が現在持っているのは、アップロードされたファイルの場所を変数として設定するiframeでのファイルのアップロードです。次に、キャレットをdivに追加する位置に配置し、別のボタンをクリックして画像を追加します。
私がやりたいのは、カレットを所定の位置に置き、ファイルのアップロードをクリックすることです。次に、アップロードするファイルを選択すると、キャレットがあった位置が記憶され、そこに画像が追加されます。
したがって、最終的には、キャレットの位置を変数に格納する必要があります。
これで違いが生じると思いますが、divには、a、strong、spanタグなどの子要素が含まれます。
これが私がこれまでにカレットの位置を取得するために持っているものです...
function getCaretPosition(editableDiv) {
var caretPos = 0;
sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0);
if (range.commonAncestorContainer.parentNode == editableDiv) {
caretPos = range.endOffset;
}
}
return caretPos;
}
$('.peCont').bind('keyup mouseup', function() {
$("p").html(getCaretPosition(this));
});
と
<div class="peCont" contenteditable="true">Text goes here along with <b>some <i>HTML</i> tags</b>.</div>
<p></p>