在contenteditable容器中使用html元素后，如何设置和获取光标位置

在`contenteditable`容器中使用`HTML`元素后，获取和设置光标位置的方法与普通的`contenteditable`容器有所不同，因为获取和设置光标位置需要考虑到`HTML`元素的影响。下面是一个示例代码片段：

function getCaretPosition(element) {
  let caretOffset = 0;
  const range = window.getSelection().getRangeAt(0);
  const preCaretRange = range.cloneRange();
  preCaretRange.selectNodeContents(element);

  // 如果光标在HTML元素内部，则需要对光标位置进行偏移
  if (range.startContainer.parentNode !== element) {
    const offset = getOffsetWithinParent(range.startContainer);
    caretOffset = preCaretRange.toString().length + offset;
  } else {
    preCaretRange.setEnd(range.endContainer, range.endOffset);
    caretOffset = preCaretRange.toString().length;
  }

  return caretOffset;
}

function setCaretPosition(element, caretPos) {
  const range = document.createRange();
  const sel = window.getSelection();
  const { childNodes } = element;

  let currentNode = element;
  let charCount = 0;
  let foundStart = false;

  for (let i = 0; i < childNodes.length; i++) {
    const node = childNodes[i];

    if (node.nodeType === Node.ELEMENT_NODE) {
      if (caretPos <= charCount + node.textContent.length) {
        currentNode = node;
        foundStart = true;
        break;
      }
      charCount += node.textContent.length;
    } else if (node.nodeType === Node.TEXT_NODE) {
      if (caretPos <= charCount + node.length) {
        range.setStart(node, caretPos - charCount);
        foundStart = true;
        break;
      }
      charCount += node.length;
    }
  }

  if (!foundStart) {
    range.setStart(currentNode, currentNode.childNodes.length);
  }

  sel.removeAllRanges();
  sel.addRange(range);
}

// 获取HTML元素在父节点中的偏移量
function getOffsetWithinParent(element) {
  let offset = 0;
  const parent = element.parentNode;
  const children = parent.childNodes;
  for (let i = 0; i < children.length; i++) {
    const child = children[i];
    if (child === element) {
      break;
    }
    if (child.nodeType === Node.ELEMENT_NODE) {
      offset += child.outerHTML.length;
    } else if (child.nodeType === Node.TEXT_NODE) {
      offset += child.textContent.length;
    }
  }
  return offset;
}

其中，`getCaretPosition`函数可以获取当前光标在`element`中的位置，`setCaretPosition`函数可以将光标设置到`element`的指定位置，`getOffsetWithinParent`函数可以获取`HTML`元素在父节点中的偏移量。你可以在需要的时候调用这些函数来设置和获取光标位置。