Javascript 如何在将组件添加到内容可编辑div后添加光标位置

我已经插入了一个按钮点击组件。现在，我希望在我的子组件添加到父div之后，光标的位置。我正在附加一个沙盒链接，它包含我到目前为止所做的代码。

代码：

---

这可能是特定于WebKit的问题，因为它没有发生在Edge或firefox中。 加载页面时，单击其他任何位置，然后单击按钮，您将看到错误不会发生。 您可以在使用getRangeAt之前检查rangeCount。 e、 g:

---

祝你好运

所以，问题是我对父div应用了一个“display:flex”属性，现在显示：“inline block”帮助并完成了它。现在只需将焦点应用到主div，我就可以在添加组件后获得光标位置。

@Teemu，感谢您的回答，我已经在问题中添加了代码。我已经将焦点添加到父div中，但它不起作用。我想做的是将光标添加到新添加的组件旁边。谢谢，这很有帮助。但我发现我在父div上应用了display:flex，并通过应用display:inline块。它工作得很好。

var ComponentClass = Vue.extend(Child);
  var instance = new ComponentClass();
  instance.$mount(); // pass nothing

  var editableDiv = this.$refs.editor;
  var range = document.createRange();
  var sel = window.getSelection();
  range = sel.getRangeAt(0);
  // check that we are in content editable div
  if (sel.getRangeAt(0).endContainer.parentNode.id === "editor") {
    range.insertNode(instance.$el);
    range.setStartAfter(instance.$el);
    sel.removeAllRanges();
    sel.addRange(range);
    editableDiv.focus();

var sel = window.getSelection && window.getSelection();
    if (sel && sel.rangeCount > 0) {// Your code here //}