javascript - Rangyでキーボードキャレットを要素の最後に移動

Question

contenteditable 内にいくつかの a 要素がありますdiv。キーボード キャレットを id で識別される特定の要素の最後に配置し、後でそれをdivusing Rangyの最後に移動するにはどうすればよいですか?

事前に感謝し、助けていただければ幸いです。

Answer 1

特定の要素の後にキャレットを設定するには、次のように範囲を作成し、その範囲をブラウザーの選択オブジェクトに適用します。

//get the browser selection object - it may or may not have a selected range
var selectionn = rangy.getSelection();

//create a range object to set the caret positioning for
var range = rangy.createRange();

//get the node of the element you wish to put the caret after
var startNode = document.getElementById('YourTagID');

//set the caret after the node for this range
range.setStartAfter(startNode);
range.setEndAfter(startNode);

//apply this range to the selection object
selection.removeAllRanges();
selection.addRange(range);

ある時点でキャレットを移動したい場合は、上記と同じことを行って「DIV」の後に移動しますが、選択範囲を「A」タグの後から「 DIV' タグの場合は、次のようにします。

//get the browser selection object - it may or may not have a selected range
var selectionn = rangy.getSelection();

//create a range object to set the caret positioning for
var range = rangy.createRange();

//get the nodes of the elements you wish to put the range between
var startNode = document.getElementById('YourTagID');
var endNode = document.getElementById('YourDivTagID');

//set the caret after the node for this range
range.setStartAfter(startNode);
range.setEndAfter(endNode);

//apply this range to the selection object
selection.removeAllRanges();
selection.addRange(range);

選択範囲を要素の最後に配置したいが、要素の後ではなく要素内に配置したい場合は、次のようにします。

//get the browser selection object - it may or may not have a selected range
var selectionn = rangy.getSelection();

//create a range object to set the caret positioning for
var range = rangy.createRange();

//get the nodes of the elements you wish to put the range between
var startNode = document.getElementById('YourTagID');
var endNode = document.getElementById('YourDivTagID');

//set the caret after the start node and at the end of the end node
//Note: the end is set using endNode.length when the node is of the text type
//and it is set using childNodes.length when the end node is of the element type
range.setStartAfter(startNode);
range.setEnd(endNode, endNode.length || endNode.childNodes.length);

//apply this range to the selection object
selection.removeAllRanges();
selection.addRange(range);

いくつかの重要な注意事項:

1. 開始ノードまたは終了ノードを ID で取得する必要はありませんが、何らかの方法で DOM から Node オブジェクト自体を取得する必要があります。
2. DOM を変更すると、その過程で範囲オブジェクトが破壊される可能性があります。そのため、2 番目のコード ブロックは、既存の範囲を参照するだけでなく、もう一度範囲を作成する作業を行います。