单击 div，获取插入符号，用相同的内容和 contenteditable=true 替换 div，然后将插入符号选择放在单击的位置

问题描述

我尝试将 div 替换为 contenteditable=true 副本，然后单击一下即可专注于第二个 div。

<script>
    let focused = false;
</script>

{#if !focused}
    <div on:click={async () => {
    focused=true;
    }}>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa unde aut eaque optio,dolorem veniam inventore adipisci eius voluptatem,dignissimos exercitationem impedit quibusdam enim illum numquam beatae,doloremque at obcaecati?
    </div>
{:else}
    <div contenteditable={true} on:blur={()=>{
    focused = false;
    }}>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa unde aut eaque optio,doloremque at obcaecati?
    </div>
{/if}

https://svelte.dev/repl/abc9dccc9fae46b894d44dde46f34bcf?version=3.38.2

我怎样才能做到这一点？

解决方法

我已经用这个函数解决了

  function getCaretIndex(element) {
    let position = 0;
    const isSupported = typeof window.getSelection !== "undefined";
    if (isSupported) {
      const selection = window.getSelection();
      if (selection.rangeCount !== 0) {
        const range = window.getSelection().getRangeAt(0);
        const preCaretRange = range.cloneRange();
        preCaretRange.selectNodeContents(element);
        preCaretRange.setEnd(range.endContainer,range.endOffset);
        position = preCaretRange.toString().length;
      }
    }
    return position;
  }