Javascript 将插入符号位置设置在contentEditable div中插入元素的正后方

我正在将一个元素插入contentEditable div，但浏览器会在插入的元素之前设置光标的位置。是否可以将光标设置在插入元素的正后方，以便用户无需重新调整光标位置即可继续键入？

以下功能将完成此操作。DOM级别2范围对象在大多数浏览器中都很容易实现这一点。在IE中，需要在插入的节点后插入标记元素，将选择移动到该节点，然后将其删除

实例：

代码：

---

如果要插入一个空div、p或span，我相信在新创建的元素中需要有“某物”来抓取范围，以便将插入符号放在其中

这是我的黑客，似乎在Chrome中工作正常。这个想法就是简单地在元素中放置一个临时字符串，然后在插入符号出现后将其删除

// Get the selection and range
var idoc = document; // (In my case it's an iframe document)
var sel = idoc.getSelection();
var range = sel.getRangeAt(0);

// Create a node to insert
var p = idoc.createElement("p"); // Could be a div, span or whatever

// Add "something" to the node.
var temp = idoc.createTextNode("anything");
p.appendChild(temp);
// -- or --
//p.innerHTML = "anything";

// Do the magic (what rangy showed above)
range.collapse(false);
range.insertNode( p );
range = range.cloneRange();
range.selectNodeContents(p);
range.collapse(false);
sel.removeAllRanges();
sel.addRange(range);

// Clear the non
p.removeChild(p.firstChild);
// -- or --
//p.innerHTML = "";

---

以下是在VueJS环境中使用Rangy对我有效的方法

// When the user clicks the button to open the popup to enter
// the URL, run this function to save the location of the user's
// selection and the selected text.
newSaveSel: function() {
  if (this.savedSel) {
    rangy.removeMarkers(this.savedSel);
  }
  // Save the location of the selected text
  this.savedSel = rangy.saveSelection();
  // Save the selected text
  this.savedSelText = rangy.getSelection().toString();
  this.showLinkPopup = true;
  console.log('newSavedSel', this.savedSel);
},
surroundRange: function() {
  // Restore the user's selected text. This is necessary since
  // the selection is lost when the user stars entering text.
  if (this.savedSel) {
    rangy.restoreSelection(this.savedSel, true);
    this.savedSel = null;
  }
  // Surround the selected text with the anchor element
  var sel = rangy.getSelection();

  var range = sel.rangeCount ? sel.getRangeAt(0) : null;
  if (range) {
    // Create the new anchor element
    var el = document.createElement("a");
    el.style.backgroundColor = "pink";
    el.href = this.anchorHref;
    el.innerHTML = this.savedSelText;
    if (this.checked) {
      el.target = "_blank";
    }
    // Delete the originally selected text
    range.deleteContents();
    // Insert the anchor tag
    range.insertNode(el);
    // Ensure that the caret appears at the end
    sel.removeAllRanges();
    range = range.cloneRange();
    range.selectNode(el);
    range.collapse(false);
    sel.addRange(range);
    this.showLinkPopup = false; 
  }
},

---

相关报道：这并没有回答我的问题。我可以在插入符号位置插入元素，但我需要将插入符号放在插入元素的正后方。您是否尝试在插入字符串后模拟键盘事件，例如键盘上的“end”（keycode#35）键。由于某种原因（在Google Chrome上测试）无法工作，但可以模拟按键事件，通常不可能模拟按键事件的实际UI效果。嘿嘿。这很有趣：“DOM级别2范围对象在大多数浏览器中都很容易实现。”三天来，我们一直在尝试各种排列方式，但收效甚微。（我知道，这不是一个有用的评论，但我不得不说）@eon:：）也许我应该对此加以限定：“与IE<9中需要的讨厌的黑客相比，DOM Level 2 Range对象在大多数浏览器中使这变得容易。”似乎只适用于文本节点。尝试给它一个span元素，光标在span之前结束？？这个元素也适用于非文本元素（至少是一个空li）

// Get the selection and range
var idoc = document; // (In my case it's an iframe document)
var sel = idoc.getSelection();
var range = sel.getRangeAt(0);

// Create a node to insert
var p = idoc.createElement("p"); // Could be a div, span or whatever

// Add "something" to the node.
var temp = idoc.createTextNode("anything");
p.appendChild(temp);
// -- or --
//p.innerHTML = "anything";

// Do the magic (what rangy showed above)
range.collapse(false);
range.insertNode( p );
range = range.cloneRange();
range.selectNodeContents(p);
range.collapse(false);
sel.removeAllRanges();
sel.addRange(range);

// Clear the non
p.removeChild(p.firstChild);
// -- or --
//p.innerHTML = "";

// When the user clicks the button to open the popup to enter
// the URL, run this function to save the location of the user's
// selection and the selected text.
newSaveSel: function() {
  if (this.savedSel) {
    rangy.removeMarkers(this.savedSel);
  }
  // Save the location of the selected text
  this.savedSel = rangy.saveSelection();
  // Save the selected text
  this.savedSelText = rangy.getSelection().toString();
  this.showLinkPopup = true;
  console.log('newSavedSel', this.savedSel);
},
surroundRange: function() {
  // Restore the user's selected text. This is necessary since
  // the selection is lost when the user stars entering text.
  if (this.savedSel) {
    rangy.restoreSelection(this.savedSel, true);
    this.savedSel = null;
  }
  // Surround the selected text with the anchor element
  var sel = rangy.getSelection();

  var range = sel.rangeCount ? sel.getRangeAt(0) : null;
  if (range) {
    // Create the new anchor element
    var el = document.createElement("a");
    el.style.backgroundColor = "pink";
    el.href = this.anchorHref;
    el.innerHTML = this.savedSelText;
    if (this.checked) {
      el.target = "_blank";
    }
    // Delete the originally selected text
    range.deleteContents();
    // Insert the anchor tag
    range.insertNode(el);
    // Ensure that the caret appears at the end
    sel.removeAllRanges();
    range = range.cloneRange();
    range.selectNode(el);
    range.collapse(false);
    sel.addRange(range);
    this.showLinkPopup = false; 
  }
},