{"id":26440206,"url":"https://github.com/iweijie/react-web-highlight","last_synced_at":"2026-03-07T03:31:16.935Z","repository":{"id":57347601,"uuid":"327327505","full_name":"iweijie/react-web-highlight","owner":"iweijie","description":"✨✨✨ 🖌🖌🖌 一个富文本高亮笔记前端库，支持高亮文本的持久化存储与还原","archived":false,"fork":false,"pushed_at":"2021-11-20T11:17:17.000Z","size":1111,"stargazers_count":86,"open_issues_count":3,"forks_count":18,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-26T01:41:59.365Z","etag":null,"topics":["highlight","highlight-text","notes","range","react","selection","text","web-highlight","website"],"latest_commit_sha":null,"homepage":"http://web-highlight.iweijie.cn/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iweijie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-06T13:56:46.000Z","updated_at":"2025-07-28T05:22:33.000Z","dependencies_parsed_at":"2022-08-28T01:40:13.281Z","dependency_job_id":null,"html_url":"https://github.com/iweijie/react-web-highlight","commit_stats":null,"previous_names":["weijie9520/react-web-highlight"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/iweijie/react-web-highlight","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iweijie%2Freact-web-highlight","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iweijie%2Freact-web-highlight/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iweijie%2Freact-web-highlight/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iweijie%2Freact-web-highlight/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iweijie","download_url":"https://codeload.github.com/iweijie/react-web-highlight/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iweijie%2Freact-web-highlight/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30206563,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T03:24:23.086Z","status":"ssl_error","status_checked_at":"2026-03-07T03:23:11.444Z","response_time":53,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["highlight","highlight-text","notes","range","react","selection","text","web-highlight","website"],"created_at":"2025-03-18T09:19:59.418Z","updated_at":"2026-03-07T03:31:16.885Z","avatar_url":"https://github.com/iweijie.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv\u003e\n    \u003ch1 align=\"center\"\u003e\u003ccode\u003eReact Web Highlighter\u003c/code\u003e\u0026nbsp;\u0026nbsp;🖍️\u003c/h1\u003e\n    \u003cp align=\"center\"\u003e\n        \u003cstrong\u003e一个富文本高亮笔记前端库，支持高亮文本的持久化存储与还原\u003c/strong\u003e\n    \u003c/p\u003e\n\u003c/div\u003e\n\n---\n\n## 0. 在线案例\n\n![操作GIF图](http://f.iweijie.cn/a3d560bd-821a-4dc5-a0f5-1cfd94847967.gif)\n\n[点我点我](http://web-highlight.iweijie.cn/)\n\n## 1. 灵感\n\n非常感谢如下两篇文章提供的思路：\n\n[「划线高亮」和「插入笔记」—— 不止是前端知识点](https://zhuanlan.zhihu.com/p/225773857)\n\n[✨ 如何用 JS 实现“划词高亮”的在线笔记功能？✨🖍️](https://juejin.cn/post/6844903827745832967#heading-8)\n\n\n\n## 2. 安装\n\n```bash\nnpm i react-web-highlighter\n```\n\n```bash\nyarn add react-web-highlighter\n```\n\n## 3. 使用方式\n\n```JavaScript\n\nimport React, { useCallback, useMemo, useState } from \"react\";\nimport TextHighlight from 'react-web-highlighter';\n\n/** Tip: 如果划线木有效果，看看样式是否有添加 */\n\nconst template = \"\u003cp\u003e我就是一段文本，想记录点什么，然而却又不知道从何时记录起，那就只能默默的埋藏在心底，生根发芽...\u003c/p\u003e\";\n\nconst App = () =\u003e {\n  const [data, setState] = useState\u003cany\u003e([]);\n\n  const modes = useMemo(() =\u003e {\n    return [\n      {\n        className: \"huaxian\",\n        mode: \"huaxian\",\n        name: \"划线\",\n      },\n    ];\n  }, []);\n\n  const onAdd = useCallback(\n    (selectText) =\u003e {\n      const d = {\n        ...selectText,\n        mode: 'huaxian',\n        id: Math.random().toString().slice(2)\n      };\n      data.push(d);\n      setState([...data]);\n    },\n    [data]\n  );\n\n  const onUpdate = useCallback(\n    (list = []) =\u003e {\n      setState((d: any) =\u003e d);\n    },\n    [setState]\n  );\n\n  return (\n    \u003cTextHighlight\n      value={data}\n      template={template}\n      modes={modes}\n      onAdd={onAdd}\n      onUpdate={onUpdate}\n    /\u003e\n  );\n};\n\nexport default App;\n\n```\n\n## 4. 示例\n\n[一个更复杂的使用示例，请查看仓库的 DEMO 示例（在`example`文件夹中）](https://github.com/weijie9520/react-text-highlight)\n\nDEMO 安装运行（当前使用的是 [tsdx](https://tsdx.io/)）:\n\n1. 项目根目录：\n\n```\nyarn\n```\n\n2. example 目录：\n\n```\nyarn\n```\n\n3. 项目根目录：\n\n```\nyarn start\n```\n\n4. example 目录：\n\n```\nyarn start\n```\n\n5. 访问： http://localhost:1234\n\n---\n\n## 5. `TextHighlight`组件参数说明\n\n- `TextHighlight`组件属性\n\n    | 参数名   | 类型                                   | 描述                                                                                                     | 是否必须 | 默认值 |\n    | -------- | -------------------------------------- | -------------------------------------------------------------------------------------------------------- | -------- | ------ |\n    | template | `string`                               | 富文本 HTML 字符串                                                                                       | 是       | `--`   |\n    | value    | `INoteTextHighlightInfo[]`             | 高亮的选区数据                                                                                           | 否       | `--`   |\n    | tagName  | `string`                               | 用于包裹高亮文本的 HTML 标签名                                                                           | 否       | `span` |\n    | onAdd    | `(data:INoteTextHighlightInfo)=\u003eany`   | 新增选区时触发的回调                                                                                     | 否       | `--`   |\n    | onUpdate | `(data:INoteTextHighlightInfo[])=\u003eany` | 选中已存在的选区时触发的回调(由于选区会有重叠，所以参数为数组列表，会返回当前标记当前选中选区的所有节点) | 否       | `--`   |\n    | rowKey   | `string`                               | 每条数据的唯一值                                                                                         | 否       | `id`   |\n    | modes    | `IModeProps[]`                         | 用于区分类型与不同类型设置样式                                                                           | 否       | `--`   |\n\n\n- `INoteTextHighlightInfo` 类型属性:\n\n  | 参数名 | 类型                           | 描述                               | 是否必须 |\n  | ------ | ------------------------------ | ---------------------------------- | -------- |\n  | list   | `INoteTextHighlightInfoItem[]` | 选区数据                           | 是       |\n  | text   | `string`                       | 选区选中的文本数据                 | 是       |\n  | mode   | `string`                       | 当前数据类型（例如：笔记，画线等） | 否       |\n\n- `INoteTextHighlightInfoItem` 类型属性:\n\n  | 参数名 | 类型       | 描述                                               | 是否必须 |\n  | ------ | ---------- | -------------------------------------------------- | -------- |\n  | level  | `number[]` | 选区层级数据，依据顶级节点一层层下钻到选中文本节点 | 是       |\n  | start  | `number`   | 当前选中的开始文本节点的偏移量                     | 是       |\n  | end    | `string`   | 当前选中的结束文本节点的偏移量                     | 是       |\n  | text   | `string`   | 当前文本节点选中的文本                             | 是       |\n\n\n- `IModeProps` 类型属性:\n\n  | 参数名    | 类型     | 描述                   | 是否必须 |\n  | --------- | -------- | ---------------------- | -------- |\n  | mode      | `string` | 类型                   | 是       |\n  | className | `string` | 用于设置当前类型的类名 | 是       |\n\n## 5.1  ToolBar 组件参数说明\n\n\u003e ToolBar 需作为 TextHighlight 的子元素存在\n\n  | 参数名        | 类型        | 描述                   | 是否必须 | 默认值 |\n  | ------------- | ----------- | ---------------------- | -------- | ------ |\n  | mask          | `boolean`   | 是否显示遮罩层         | 否       | true   |\n  | visible       | `boolean`   | 用于控制弹窗的显示隐藏 | 否       | false  |\n  | autoClosable  | `boolean`   | 点击自动触发管         | 否       | true   |\n  | wrapClassName | `string`    | 设置样式               | 否       | --     |\n  | onCancel      | `function`  | 设置关闭的回调         | 否       | --     |\n  | children      | `ReactNode` | 弹窗内部的子元素       | 否       | --     |\n\n\n## 6.  方法\n\n`setSelectRange` 方法:\n| 参数名 | 类型 | 描述 | 是否必须 |\n| --------- | -------- | ---------------------- | -------- |\n| node | `INoteTextHighlightInfo` | 用于设置原生选中文本的方法 | 是 |\n\n## 7.  TODO\n\n1. [x] 编写测试用例\n2. [ ] 完善交互逻辑\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiweijie%2Freact-web-highlight","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiweijie%2Freact-web-highlight","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiweijie%2Freact-web-highlight/lists"}