当前位置：首页 > React

react文本标注实现

2026-01-26 11:03:22React

React 文本标注实现方法

使用 contentEditable 实现基础标注 通过设置 contentEditable 属性使元素可编辑，结合 window.getSelection() 获取选中文本范围。利用 Range API 动态包裹选中文本：

const HighlightableText = () => {
  const handleMouseUp = () => {
    const selection = window.getSelection();
    if (selection.toString().length > 0) {
      const range = selection.getRangeAt(0);
      const span = document.createElement('span');
      span.className = 'highlight';
      range.surroundContents(span);
    }
  };

  return (
    <div 
      contentEditable 
      onMouseUp={handleMouseUp}
      dangerouslySetInnerHTML={{ __html: '可编辑的文本内容' }}
    />
  );
};

使用第三方库（如 Draft.js） Draft.js 提供更完整的文本编辑与标注解决方案，支持复杂样式和实体管理：

import { Editor, EditorState, RichUtils } from 'draft-js';

const TextEditor = () => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  const handleKeyCommand = (command) => {
    const newState = RichUtils.handleKeyCommand(editorState, command);
    if (newState) {
      setEditorState(newState);
      return 'handled';
    }
    return 'not-handled';
  };

  const toggleHighlight = () => {
    setEditorState(RichUtils.toggleInlineStyle(editorState, 'HIGHLIGHT'));
  };

  return (
    <div>
      <button onClick={toggleHighlight}>高亮文本</button>
      <Editor
        editorState={editorState}
        handleKeyCommand={handleKeyCommand}
        onChange={setEditorState}
      />
    </div>
  );
};

实现持久化标注 结合状态管理保存标注位置信息，使用字符偏移量记录标注范围：

const persistHighlight = (text, start, end) => {
  const before = text.substring(0, start);
  const highlighted = text.substring(start, end);
  const after = text.substring(end);
  return `${before}<span class="highlight">${highlighted}</span>${after}`;
};

标注样式与交互增强 通过 CSS 自定义标注样式并添加交互事件：

.highlight {
  background-color: yellow;
  cursor: pointer;
  transition: background-color 0.3s;
}

.highlight:hover {
  background-color: orange;
}

注意事项

react文本标注实现

跨浏览器兼容性需测试 Selection 和 Range API
长文本性能优化建议使用虚拟滚动
富文本场景推荐使用专业库如 Slate.js 或 TipTap
服务端渲染需处理 document 未定义的情况

标签: 文本 react

分享给朋友：

如何生成react代码

使用 Create React App 生成项目安装 Node.js 后，通过命令行工具运行以下命令创建新项目： npx create-react-app my-app cd my-app npm…

react如何查

React 查询方法 React 提供了多种查询 DOM 元素的方式，以下是几种常见的方法：使用 ref 通过 useRef 钩子可以获取 DOM 节点的引用，适用于直接操作 DOM 的场景。…

react如何打包

打包 React 项目的基本步骤 React 项目通常使用 create-react-app 或类似的脚手架工具创建，这些工具内置了打包功能。以下是打包 React 项目的详细方法：安装依赖并构建…

react如何减少伤病

减少React应用中的性能问题（避免"伤病"）优化React应用性能需要从组件渲染、状态管理和外部依赖等多方面入手。以下是关键优化策略：使用React.memo进行组件记忆对函数组件使用Rea…

如何监控react性能

使用 React Profiler API React 16.5 及以上版本内置了 Profiler API，可直接测量组件渲染时间。通过 <React.Profiler> 包裹目标组件，…

react如何滚动scroll

React 实现滚动的方法使用 useRef 和 scrollTo 方法通过 useRef 获取 DOM 元素的引用，调用 scrollTo 方法实现滚动。 import React, { us…

react文本标注实现