用 html-React 替换 contentEditable div 中的选定文本

Question

我有一个contectEditable div 和按钮，当我在 div 中选择这样的文本时想要 (CodeSandbox)

然后按下按钮，将选中的文本替换为一个span html 元素，并将选中的文本作为内容。例如，我有这个 React 组件

import {useState} from 'react';

const EdiatbelContent = () => {

    const onClickhandler () => {};
    
    const [html, setHtml] = useState("<p>Hello World!</p>");
    
    return <>
       <div contentEditable="true" dangerouslySetInnerHTML={{ __html: html }}></div>
       <button onClick={onClickHandler}>Bold</button>
    </>

}

export default EditableContent;

我想当我按下按钮时，替换选中的文本（如果有的话），说出上面例子中的单词Hello，用span html元素<span className="text-bold">Hello</span>，这样html状态变量就变成了

<p><span className="text-bold">Hello</span> World!</p>

我怎样才能做到这一点？

Answer 1

如果我的问题正确，您可以使用Selection API 访问用户的选择并使用其属性来实现您想要的。以下是一些可以帮助您入门的代码：

const onClickHandler = () => {
      // get user's selection
      const selection = window.getSelection();
      // get the start and end index of selection
      // remember user can select backwards
      let startIndex = selection.anchorOffset;
      let endIndex = selection.focusOffset;
      if (startIndex > endIndex) {
        startIndex = selection.focusOffset;
        endIndex = selection.anchorOffset;
      }
      // now get the text before and after the selection
      const beforeSelection = html.substring(0, startIndex);
      const afterSelection = html.substring(endIndex, html.length);
      // and set the html as you see fit
      setHtml(`${beforeSelection}<span className="text-bold">${selection.toString()}</span>${afterSelection}`)
};

这当然是最基本的形式，需要考虑很多边缘情况。