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

Question

我通过单击按钮插入了组件。现在我想要我的子组件添加到父组件后的光标位置 div。我附上了一个沙盒 link，它包含我到目前为止完成的代码。 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();

Answer 1

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

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

祝你好运！

Answer 2

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

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

How to add cursor position after adding a component to content-editable div

html

javascript

range

cursor

vue.js