在特定位置設置插入的動態添加HTML

Question

我有一個CONTENTEDITABLE DIV

<div contenteditable="true" class="editable"></div> 

我使用一些HTML追加到它：

$('.editable').html('<p><br></p>'); 

我怎樣才能<br>之前設置插入符？

Answer 1

在content editables中設置光標位置是棘手的業務。
遊標的處理依賴於瀏覽器。 有不同瀏覽器的範圍和選擇apis是非常不一致的。

這是如何使用遊標玩：

創建由document.createRange()
一個範圍對象選擇的範圍的方法指定位置（見API）
獲取選擇對象由selection=window.getSelection()
刪除所有現有選擇selection.removeAllRanges();
將範圍添加到選擇範圍內selection.addRange(range);

在這種情況下，段落元素中沒有文本內容，因此您不能將光標放在其中。您可以通過range.selectNode選擇節點，也可以將光標放置在元素的前面/後面。 在不同的瀏覽器中（特別是在邊緣情況下）（如空的div或第一個或最後一個位置），在前或後放置光標也會出現奇怪現象。

你必須清楚地指定你想在UI中實現什麼。然後我可以建議一些邏輯來實現這一點。