Как добавить положение курсора после добавления компонента в содержимое-редактируемый div

#javascript #html #vue.js #range #cursor

#javascript #HTML #vue.js #диапазон #курсор

Вопрос:

Я вставил компонент одним нажатием кнопки. Теперь я хочу, чтобы положение курсора после добавления моего дочернего компонента в родительский div. Я прикрепляю ссылку на изолированную среду, она содержит код, который я уже сделал. ПЕСОЧНИЦА

код:

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

1. @Teemu, спасибо за ответ, я добавил код в вопрос. Я добавил фокус к родительскому div, но это не сработало. Что я хочу сделать, так это добавить курсор рядом с добавленным новым компонентом.

Ответ №1:

Вероятно, это проблема, связанная с WebKit, поскольку этого не произошло в Edge или firefox. когда страница загрузится, щелкните в любом другом месте, а затем нажмите кнопку, и вы увидите, что ошибка не произойдет. вы можете проверить rangeCount перед использованием getRangeAt. например:

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

Удачи!

Ответ №2:

Итак, проблема заключалась в том, что я применил свойство «display: flex» к родительскому div и теперь display: «inline-block» помогло, и это сделано. Теперь, просто применив фокус к основному div, я получаю положение курсора после добавления компонента.