{"id":13671216,"url":"https://github.com/wowlusitong/re-editor","last_synced_at":"2025-10-04T00:37:31.157Z","repository":{"id":34810434,"uuid":"175192357","full_name":"wowlusitong/re-editor","owner":"wowlusitong","description":"一个开箱即用的React富文本编辑器 🚀re-editor","archived":false,"fork":false,"pushed_at":"2022-12-09T15:58:57.000Z","size":748,"stargazers_count":422,"open_issues_count":39,"forks_count":39,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-30T02:07:01.290Z","etag":null,"topics":["ant","ant-design","editor","re-editor","react","rich","rich-text-editor","slate","slate-editor","wysiwyg","wysiwyg-editor"],"latest_commit_sha":null,"homepage":"https://re-editor.netlify.com","language":"JavaScript","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/wowlusitong.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2019-03-12T10:58:36.000Z","updated_at":"2025-02-24T00:52:55.000Z","dependencies_parsed_at":"2023-01-15T09:18:32.916Z","dependency_job_id":null,"html_url":"https://github.com/wowlusitong/re-editor","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wowlusitong%2Fre-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wowlusitong%2Fre-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wowlusitong%2Fre-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wowlusitong%2Fre-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wowlusitong","download_url":"https://codeload.github.com/wowlusitong/re-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247427006,"owners_count":20937201,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["ant","ant-design","editor","re-editor","react","rich","rich-text-editor","slate","slate-editor","wysiwyg","wysiwyg-editor"],"created_at":"2024-08-02T09:01:03.274Z","updated_at":"2025-10-04T00:37:26.113Z","avatar_url":"https://github.com/wowlusitong.png","language":"JavaScript","readme":"# re-editor \u0026middot; [![Netlify Status](https://api.netlify.com/api/v1/badges/815fce6a-8e8e-4af9-b2c8-5c15dace9288/deploy-status)](https://app.netlify.com/sites/re-editor/deploys) [![CircleCI](https://circleci.com/gh/wowlusitong/re-editor.svg?style=svg)](https://circleci.com/gh/wowlusitong/re-editor) [![npm](https://img.shields.io/npm/v/re-editor.svg?style=popout)](https://www.npmjs.com/package/re-editor) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/wowlusitong/re-editor/blob/master/LICENSE)  [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n一个开箱即用的React富文本编辑器 🚀\n\n\u003cimg width=\"500\" alt=\"image\" src=\"https://user-images.githubusercontent.com/3221051/54874637-513c2580-4e2a-11e9-94f1-3d9893e20066.png\"\u003e\n\n\n\n- [使用方法](#使用方法)\n  - [开箱即用-提供 antd 风格工具栏](#开箱即用)\n  - [自定义-只引入编辑器核心，可定制工具栏](#自定义)\n- [常见问题](#FAQ)\n- [支持的功能](#功能)\n\n# 特点\n- 开箱即用，无需配置\n- 定制化，可自行开发任意风格和形式的工具条 [API补全中]\n- 支持元素功能设置，例如修改图片大小\n- 支持markdown语法\n- [查看更多](#功能)\n\n# 使用方法\n编辑器为适应不同开发需求，提供下面两种使用方法\n\n## 开箱即用\nre-editor是一个封装好的组件, 安装就可以使用, 它里面包含 [@re-editor/core](https://www.npmjs.com/package/@re-editor/core) 和 [@re-editor/toolbar-antd](https://www.npmjs.com/package/@re-editor/toolbar-antd), 工具条默认使用antd风格，如果要使用其他工具条请参考下面自定义文档\n### 安装依赖\n```sh\n$ npm install re-editor\n```\n### 引入样式\n在js里面引入\n```js\nimport 're-editor/lib/styles/index.css'\n```\n也可以在css里面引入(需要css预处理支持)\n```css\n@import 're-editor/lib/styles/index.css'\n```\n\n### props\n| 属性 | 说明 |类型|\n| - | - |-|\n| value | 编辑器的值 | [object](https://github.com/wowlusitong/re-editor/blob/master/packages/core/src/scripts/utils/utils.js#L4-L19)\n| onChange| 编辑器更改内容的回调|(value: [Value](https://docs.slatejs.org/slate-core/value)) =\u003e void\n| placeholder | 占位文本 | string\n| readOnly | 只读模式 | boolean\n| onImageUpload | 自定义图床 | (file: File) =\u003e Promise\u003curl: string\u003e\n| tools | 设置工具栏的显示内容 | Array\u003cArray\u003cstring\u003e | string\u003e\n\n### 设置工具栏显示内容\n`tools props`支持数组形式，如果是二维数组会分组显示\n```js\ntools={['bold', 'italic', 'underline', 'strikethrough']}\n// 或者\ntools={[\n  ['bold', 'italic', 'underline', 'strikethrough'],\n  ['orderedlist', 'unorderedlist']\n]}\n```\n| 名称 | 功能 |\n| - | - |\n| bold | 粗体 |\n| italic | 斜体 |\n| underline | 下划线 |\n| strikethrough | 删除线 |\n| orderedlist | 有序列表 |\n| unorderedlist | 无序列表 |\n| heading | 标题 |\n| align | 对齐方式 |\n| image | 图片 |\n| table | 表格 |\n| code | 代码 |\n| undo | 撤销 |\n| redo | 重做 |\n| fullscreen | 全屏 |\n\n\n## 自定义\n编辑器拆分为两个部分，内容编辑区域 和 工具条，下面介绍如何自定义工具条\n### 安装编辑器核心\n```sh\n$ npm install @re-editor/core\n```\n### 创建工具条\n可以用任何方式创建编辑器工具条，需要将编辑器的实例传给工具条，可参考 [re-editor](https://github.com/wowlusitong/re-editor/tree/master/packages/re-editor) 和 [@re-editor/toolbar-antd](https://github.com/wowlusitong/re-editor/tree/master/packages/toolbar-antd)的实现，详情查看API文档(这部分文档还没写完，会在近期补全😂)\n\n例如实现一个加粗功能:\n```js\nimport { command } from '@re-editor/core';\n\nconst Demo = (props) =\u003e {\n  function handleClick() {\n    command(props.editor)('bold')\n  }\n  return \u003cdiv onClick={handleClick}\u003ebold\u003c/div\u003e\n}\n\n```\n\n# packages介绍\n- re-editor: 一个封装好的，包含工具条的编辑器\n- @re-editor/core: 编辑器核心\n- @re-editor/toolbar-antd: 基于antd制作的工具条，默认\n- @re-editor/examples: 演示项目\n\n\n# FAQ\n#### 和slate或draft-js对比有什么区别?\nslate或draft并不是一个纯编辑器，它们更像是一个用于构建编辑器的框架，re-editor是基于slate开发，让你不必关注`构建编辑器`的过程。\n#### 怎么修改样式\n样式分为两部分，node(粗体、h1、h2等)和工具栏，它们都可以通过css重写基础样式，工具栏也可以做到完全重写\n样式可以通过css自定义\n#### 每次保存数据量太大怎么办？\n使用增量更新，onChange回调的value是 [immutable](https://github.com/immutable-js/immutable-js)格式，可以使用[immutable-js-diff](https://github.com/intelie/immutable-js-diff#readme)等方法获取diff的内容进行增量更新\n#### 如何指定上传图片服务器\n图片默认保存为base64，如果需要将图片上传到指定服务器，可使用`onImageUpload`函数，\n(file: File) =\u003e Promise\u003curl: string\u003e [示例代码](https://github.com/wowlusitong/re-editor/blob/master/packages/examples/src/scripts/CustomUploadImageApp.js)\n\n\n\n\n# 功能\n\n## 文字装饰\n`粗体` `斜体` `下划线` `删除线` `上标` `下标`\n## 列表\n`有序列表` `无序列表`\n## 对齐方式\n`左对齐` `右对齐` `居中对齐` `两端对齐`\n\n## 标题\n`h1` `h2` `h3` `h4` `h5` `h6`\n\n## 其他\n- `图片`\n  - 设置大小\n  - 从剪贴板复制\n  - 支持自定义上传图片服务器地址\n- `表格`\n  - 增加行\n  - 增加列\n  - 删除行\n  - 删除列\n- `代码高亮`\n  - js\n  - css\n  - html\n- `markdown`\n  - h1-h6: `# `\n  - 引用: `\u003e `\n  - 有序列表: `- `\n  - 无序列表: `1. `\n- 全屏编辑  \n\n其他功能持续增加中...\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwowlusitong%2Fre-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwowlusitong%2Fre-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwowlusitong%2Fre-editor/lists"}