将组件添加到内容可编辑的 div 后如何添加光标位置答案

【问题标题】：How to add cursor position after adding a component to content-editable div将组件添加到内容可编辑的 div 后如何添加光标位置
【发布时间】：2020-08-21 04:19:43
【问题描述】：

我通过单击按钮插入了组件。现在我想要将子组件添加到父 div 后的光标位置。我附上了一个沙盒链接，它包含我到目前为止所做的代码。 SANDBOX

代码：

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();

【问题讨论】：

@Teemu，感谢您的回复，我已在问题中添加了代码。我已将焦点添加到父 div，但它不起作用。我要做的是在添加的新组件旁边添加光标。

标签： javascript html vue.js range cursor

【解决方案1】：

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

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

祝你好运！

【讨论】：

谢谢，有帮助。但我发现我已经在父 div 上应用了 display:flex 并通过应用 display: inline-block。效果很好。

【解决方案2】：

所以，问题是我已将“display:flex”属性应用于父 div，现在 display:“inline-block”帮助并完成了。现在只是将焦点应用到主 div，我得到了添加组件后的光标位置。

【讨论】：