如何在忽略HTML标签的情况下将插入符号放置在contenteditable div中？

Question

Thes following code sets the caret based on the value of caret :

<div ref="editable" contenteditable="true">
  This text can be edited by the user. Right away.
</div>
<button type="button" @click="setCaret">Set caret</button>

setCaret () {
  const node = this.$refs.editable
  node.focus()
  const textNode = node.firstChild
  const caret = node.textContent.search('R')
  const range = document.createRange()
  range.setStart(textNode, caret)
  range.setEnd(textNode, caret)
  const sel = window.getSelection()
  sel.removeAllRanges()
  sel.addRange(range)
}

If you wrap the text inside p tags though:

<p>This text can be edited by the user.</p>
<p>Right away.</p>

You get this error:

App.vue?6b51:36Uncaught DOMException: Failed to execute 'setStart' on 'Range': There is no child at offset -1.(…)

How to modify the code so setCaret sets the caret while ignoring the HTML tags?

Answer 1

You may need to search those nodes inside the div recursively:

function findTextNode(node) {
  const childNodes = node.childNodes;
  if (childNodes.length > 0) {
    for(let i=0; i<childNodes.length; i++) {
      const child = childNodes[i];
      const result = findTextNode(child);
      if (result) {
        return result;
      }
    }
    return false;
  } else {
    const place = node.textContent.search('R');
    if (!node.tagName && place!==-1) {
      return node;
    }
    return false;
  }
}

Working fiddle here: http://jsfiddle.net/1x6knn37/