javascript/react，在 contentEditable 元素中查找插入符号索引并将内容拆分为 3使用范围

问题描述

我想弄清楚，如何在 contentEditable 元素中使用插入符号。 首先，我想要插入符号索引位置。 其次，我想将我的内容分成 3 个：选择、选择前和选择后。

我已经制作了这段代码，它可以工作:) ...但我不确定我没有让它变得比必要的更复杂。我确实不为我使用的所有“useRef”感到自豪。

如果您认为我可以改进代码，请给我留言。

import { useState,useRef } from "react";

const Test = () => {
  const inputRef = useRef(null),beforeRef = useRef(null),currentRef = useRef(null),afterRef = useRef(null);
  const [state] = useState(
    "Lorem <strong>ipsum dolor</strong> sit amet,<em>consectetur adipiscing</em> elit,<u>sed do</u> eiusmod..."
  );
  const [caret,setCaret] = useState(null);

  const updateinformation = () => {
    beforeRef.current.innerHTML = "";
    currentRef.current.innerHTML = "";
    afterRef.current.innerHTML = "";

    const range = window.getSelection().getRangeAt(0);
    let tempRange = document.createrange();

    currentRef.current.appendChild(range.cloneContents());

    tempRange.setStartBefore(inputRef.current.firstChild);
    tempRange.setEnd(range.startContainer,range.startOffset);
    beforeRef.current.appendChild(tempRange.cloneContents());

    tempRange.setStart(range.endContainer,range.endOffset);
    tempRange.setEndAfter(inputRef.current.lastChild);
    afterRef.current.appendChild(tempRange.cloneContents());

    tempRange = range.cloneRange();
    tempRange.selectNodeContents(inputRef.current);
    tempRange.setEnd(range.endContainer,range.endOffset);
    setCaret(tempRange.toString().length);
  };

  return (
    <div>
      <div
        className='column is-full p-3 has-background-light'
        ref={inputRef}
        contentEditable={true}
        suppressContentEditableWarning={true}
        spellCheck={false}
        dangerouslySetInnerHTML={{ __html: state }}
        onKeyUp={updateinformation}
        onmouseup={updateinformation}
        onBlur={updateinformation}
      />
      <div className='tag m-2'>caret: {caret}</div>
      <div className='columns is-not-hidden'>
        <div className='column is-one-third' ref={beforeRef}></div>
        <div className='column is-one-third' ref={currentRef}></div>
        <div className='column is-one-third' ref={afterRef}></div>
      </div>
    </div>
  );
};

export default Test;

顺便说一句，css 是布尔玛。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）