javascript - 如何在 contenteditable div 中放置插入符号，同时忽略 HTML 标签？

Question

以下代码根据 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)
}

如果将文本包含在 p 标签内:

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

您收到此错误:

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

如何修改代码，以便 setCaret 设置插入符，同时忽略 HTML 标记？

Answer 1

您可能需要递归搜索 div 内的这些节点:

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;
  }
}

在这里工作 fiddle :http://jsfiddle.net/1x6knn37/