{"id":23577088,"url":"https://github.com/ifanrx/react-ueditor","last_synced_at":"2025-05-16T07:05:37.947Z","repository":{"id":25887117,"uuid":"105345495","full_name":"ifanrx/react-ueditor","owner":"ifanrx","description":"a ueditor component for react","archived":false,"fork":false,"pushed_at":"2024-11-18T22:43:00.000Z","size":50417,"stargazers_count":168,"open_issues_count":24,"forks_count":42,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-05-09T22:20:56.024Z","etag":null,"topics":["react","react-editor","react-ueditor","react-umeditor","ueditor","umeditor"],"latest_commit_sha":null,"homepage":"","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/ifanrx.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-30T05:52:57.000Z","updated_at":"2025-01-01T06:25:30.000Z","dependencies_parsed_at":"2024-06-18T21:22:49.516Z","dependency_job_id":"df151a5c-a601-4732-8dce-3d9363ed39c7","html_url":"https://github.com/ifanrx/react-ueditor","commit_stats":null,"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ifanrx%2Freact-ueditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ifanrx%2Freact-ueditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ifanrx%2Freact-ueditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ifanrx%2Freact-ueditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ifanrx","download_url":"https://codeload.github.com/ifanrx/react-ueditor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254485061,"owners_count":22078767,"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":["react","react-editor","react-ueditor","react-umeditor","ueditor","umeditor"],"created_at":"2024-12-26T22:19:26.706Z","updated_at":"2025-05-16T07:05:32.936Z","avatar_url":"https://github.com/ifanrx.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-ueditor\n![react-ueditor](https://cloud-minapp-1131.cloud.ifanrusercontent.com/1eGmM9tnLMPCRifj.png)\n\n使用 react 框架对 ueditor 进行封装和扩展\n\n![](https://img.shields.io/npm/v/ifanrx-react-ueditor.svg) ![](https://img.shields.io/npm/dw/ifanrx-react-ueditor.svg)\n\n\n### ✨ 特性\n\n- 支持更灵活的图片和音视频资源上传\n- 支持同个页面存在多个编辑器实例\n- 支持对复制进来的图片进行操作\n- 允许扩展工具栏，支持在扩展中使用已有的 react 组件\n\n\n\n### 📦 下载\n\n```\n# 使用 npm 安装\nnpm install ifanrx-react-ueditor --save\n\n# 使用 yarn 安装\nyarn add ifanrx-react-ueditor\n```\n\n\n### 🔨 使用\n\n```\nimport ReactUeditor from 'ifanrx-react-ueditor'\n\n\u003cReactUeditor\n  ueditorPath={`${window.YOUR_PATH}/ueditor`}\"\n/\u003e\n```\n\n### 🔌 插件\n\n\u003e extendControls 已不推荐使用，请直接使用 plugins，指定插件。\n\n插件分为两种，一种是内置的插件，一种是自定义的插件。现支持内置插件如下：\n\n1. insertCode  插入代码块\n2. uploadImage  上传图片\n3. uploadVideo  上传视频\n4. uploadAudio  上传音频\n5. insertLink  添加链接\n\n内置插件，直接传入插件的名称即可。自定义插件则是传入一个 Function，类型定义（使用 typescript 只为了说明类型）为：\n\n```typescript\ninterface IPlugin {\n  (ueditor: UEditor): IPluginConfig\n}\n\ninterface IPluginConfig {\n  cssRules: String\n  menuText: String\n  onIconClick?: () =\u003e void\n  render: (visible: Boolean, closeModal: () =\u003e void) =\u003e React.ReactElement\u003cany\u003e\n  title?: String\n}\n```\n\nUEditor 为 UEditor 实例。详细内容，请参考[官方文档](https://ueditor.baidu.com/doc/#UE.Editor)\n\n#### 插件使用示例\n\n1. 内置插件\n\n    ```javascript\n    \u003cReactUeditor\n      ...\n      plugins={[\n        'insertCode',\n        'uploadImage',\n        'uploadVideo',\n        'uploadAudio',\n        'insertLink',\n      ]}\n      ...\n    /\u003e\n    ```\n\n2. 自定义插件\n\n    ```javascript\n    const uploadImagePlugin = ueditor =\u003e {\n      return {\n        menuText: '图片上传',\n        cssRules: 'background-position: -726px -77px;',\n        render: (visible, closeModal) =\u003e {\n          const handleSelectImage = (url) =\u003e {\n            ueditor.focus()\n            ueditor.execCommand('inserthtml', `\u003cimg src=\"${url}\" /\u003e`)\n            closeModal()\n          }\n          return \u003cModal visible={visible} onSelectImage={handleSelectImage} /\u003e\n        }\n      }\n    }\n\n    \u003cReactUeditor\n      ...\n      plugins={[uploadImagePlugin]}\n      ...\n    /\u003e\n    ```\n\n更多功能请移步到 react-ueditor 的 [wiki 页面](https://github.com/ifanrx/react-ueditor/wiki)\n\n## 🤝 贡献\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" \u003e\n        \u003ca href=\"https://github.com/yaokailun\"\u003e\n          \u003cimg src=\"https://avatars2.githubusercontent.com/u/11460856\" width=\"75px\" height=\"75px\"\u003e\u003cbr/\u003e\n          \u003csub\u003ekailunyao\u003c/sub\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" \u003e\n        \u003ca href=\"https://github.com/larry011\"\u003e\n          \u003cimg src=\"https://avatars1.githubusercontent.com/u/10259971\" width=\"75px\" height=\"75px\"\u003e\u003cbr/\u003e\n          \u003csub\u003elarry011\u003c/sub\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n\n如果你希望为这个项目贡献代码，需要了解以下情况：\n\n- 在根目录下执行 `yarn start` 会启动开发服务器，此时会在浏览器中展示 ReactUeditor 的真实效果，在 ReactUeditor/ 下的修改都会进行热更新\n\n- example.js, index.html, dist/ 都只是为了展示 ReactUeditor 的真实效果，主要代码在 ReactUeditor/ 中\n\n- 需要修改 ueditor 源码时，直接修改 ueditor 目录下的文件，修改完执行：`cd ueditor` 和 `yarn grunt` 命令，此时会重新生成 ueditor 构建成功的文件到 vendor/ueditor\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fifanrx%2Freact-ueditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fifanrx%2Freact-ueditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fifanrx%2Freact-ueditor/lists"}