如何替换反应/文本区域中的“选定文本”=>“装饰文本”？我无法获得“所选文本”的确切位置索引

如何解决如何替换反应/文本区域中的“选定文本”=>“装饰文本”？我无法获得“所选文本”的确切位置索引

我正在尝试使用 react 构建一些文本编辑器

我不是英语母语，很抱歉下面的问题

我想做的就是下面这个

(it's 'notion' page gif)

如果用户使用鼠标（或键盘）拖动文本以在某些文本中设置块，
弹出菜单（用于编辑“选定的文本”）显示

我在第一个被卡住了。

我可以获取整个文本和选定的文本

let wholeText = whole.anchorNode.childNodes[0].defaultValue;
let selectedText = window.getSelection().toString();

但我无法获得 selectedText 中 wholeText 的“确切位置”

这是我的代码（反应，样式组件）

import { useState,useEffect } from 'react';
import styled from 'styled-components';
import autosize from 'autosize';

export default function TextBox({ id,index,content,handleContentInput }) {
  const [currentContent,setCurrentContent] = useState(content);
  const [areaHeight,setAreaHeight] = useState(25);

  useEffect(() => {
    autosize(document.querySelector(`.TextBoxWrap_${id}`));
  },[currentContent]);

  return (
    <TextBoxContainer
      className={`TextBoxContainer_${id}`}
      areaHeight={areaHeight}
      onClick={() => {
        document.querySelector(`.TextBoxContainer_${id}`).focus();
      }}
    >
      <TextBoxWrap
        className={`TextBoxWrap_${id}`}
        areaHeight={areaHeight}
        onChange={(event) => {
          setCurrentContent(event.target.value);
        }}
        onBlur={() => handleContentInput(id,currentContent)}
        onKeyUp={() => {
          let newHeight = document.querySelector(`.TextBoxWrap_${id}`)
            .clientHeight;
          setAreaHeight(newHeight);
        }}
        onmouseup={() => {
          let whole = window.getSelection();
          if (!whole) return;

          let range = whole.getRangeAt(0);

          console.log({ whole,range });

          let wholeText = whole.anchorNode.childNodes[0].defaultValue;

          let selectedText = whole.toString();

          console.log({ wholeText,selectedText });

          let start = range.startOffset; // Start position
          let end = range.endOffset; // End position

          console.log({ start,end });
        }}
        value={currentContent}
      ></TextBoxWrap>
    </TextBoxContainer>
  );
}

const TextBoxContainer = styled.div`
  max-width: 890px;
  width: 100%;
  height: ${(props) => `${props.areaHeight}px`};

  border: 1px solid black;
  margin: 3px;
  padding: 2px;
`;

const TextBoxWrap = styled.textarea`
  /* border: 1px solid black; */
  Box-sizing: 'border-Box';
  border: none;
  outline: none;

  width: 100%;
  min-height: 20px;
  height: 20px;

  /* padding: 2x; */
  Box-shadow: none;
  display: block;
  overflow: hidden; // Removes scrollbar
  resize: none;
  font-size: 18px;
  /* line-height: 1.5em; */
  /* font-family: Georgia,'Malgun Gothic',serif; */
`;

在onmouseup里面，它是这样工作的

console.log({ WholeText,selectedText }); : 工作正常
console.log({ start,end }); : 总是 0,0

wholeText.indexOf(selectedText) 是我的选择，但 indexOf() 只给我“第一个”索引匹配，

所以，即使我想要“aaaaaa'a'aa”但 indexOf 会给我 '0' (=> "'a'aaaaaaaaaa")

我在想什么

获取“确切索引（位置）”，并用它剪切 wholeText
用弹出框装饰selectedText（返回html元素？像${selectedText}
然后，组合这三个项目（wholeText_front、decorated_selectedText、wholeText_back）
并且，将弹出菜单 div 放在所选文本的正上方

这意味着，我需要'选择一个人的位置

我该怎么做？请给我建议

谢谢！

我在发布这个问题之前阅读的帖子

解决方法

我的问题可能有一些解决方案，所以自己发布这个答案

在这个问题 (How to get the start and end points of selection in text area?) 中，'Tim Down' 用 getInputSelection 函数回答。

getInputSelection 需要 el 作为参数，我认为这是某种“html 元素”

所以，从这个问题（get id of focused element using javascript ），我得到了一个提示：document.activeElement

而且，我尝试了 getInputSelection(document.activeElement) 并得到了一个像 { start: (number),end: (number) }

这样的对象

如何替换反应/文本区域中的“选定文本”=>“装饰文本”？我无法获得“所选文本”的确切位置索引

如何解决如何替换反应/文本区域中的“选定文本”=>“装饰文本”？我无法获得“所选文本”的确切位置索引

解决方法

相关推荐