https://github.com/ifanrx/react-ueditor
a ueditor component for react
https://github.com/ifanrx/react-ueditor
react react-editor react-ueditor react-umeditor ueditor umeditor
Last synced: 4 days ago
JSON representation
a ueditor component for react
- Host: GitHub
- URL: https://github.com/ifanrx/react-ueditor
- Owner: ifanrx
- License: mit
- Created: 2017-09-30T05:52:57.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-11-18T22:43:00.000Z (6 months ago)
- Last Synced: 2025-05-09T22:20:56.024Z (11 days ago)
- Topics: react, react-editor, react-ueditor, react-umeditor, ueditor, umeditor
- Language: JavaScript
- Homepage:
- Size: 48.1 MB
- Stars: 168
- Watchers: 19
- Forks: 42
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-ueditor
使用 react 框架对 ueditor 进行封装和扩展
 
### ✨ 特性
- 支持更灵活的图片和音视频资源上传
- 支持同个页面存在多个编辑器实例
- 支持对复制进来的图片进行操作
- 允许扩展工具栏，支持在扩展中使用已有的 react 组件
### 📦 下载
```
# 使用 npm 安装
npm install ifanrx-react-ueditor --save
# 使用 yarn 安装
yarn add ifanrx-react-ueditor
```
### 🔨 使用
```
import ReactUeditor from 'ifanrx-react-ueditor'
```
### 🔌 插件
> extendControls 已不推荐使用，请直接使用 plugins，指定插件。
插件分为两种，一种是内置的插件，一种是自定义的插件。现支持内置插件如下：
1. insertCode 插入代码块
2. uploadImage 上传图片
3. uploadVideo 上传视频
4. uploadAudio 上传音频
5. insertLink 添加链接
内置插件，直接传入插件的名称即可。自定义插件则是传入一个 Function，类型定义（使用 typescript 只为了说明类型）为：
```typescript
interface IPlugin {
(ueditor: UEditor): IPluginConfig
}
interface IPluginConfig {
cssRules: String
menuText: String
onIconClick?: () => void
render: (visible: Boolean, closeModal: () => void) => React.ReactElement
title?: String
}
```
UEditor 为 UEditor 实例。详细内容，请参考[官方文档](https://ueditor.baidu.com/doc/#UE.Editor)
#### 插件使用示例
1. 内置插件
```javascript
```
2. 自定义插件
```javascript
const uploadImagePlugin = ueditor => {
return {
menuText: '图片上传',
cssRules: 'background-position: -726px -77px;',
render: (visible, closeModal) => {
const handleSelectImage = (url) => {
ueditor.focus()
ueditor.execCommand('inserthtml', `
`)
closeModal()
}
return
}
}
}
```
更多功能请移步到 react-ueditor 的 [wiki 页面](https://github.com/ifanrx/react-ueditor/wiki)
## 🤝 贡献
[](http://makeapullrequest.com)
如果你希望为这个项目贡献代码，需要了解以下情况：
- 在根目录下执行 `yarn start` 会启动开发服务器，此时会在浏览器中展示 ReactUeditor 的真实效果，在 ReactUeditor/ 下的修改都会进行热更新
- example.js, index.html, dist/ 都只是为了展示 ReactUeditor 的真实效果，主要代码在 ReactUeditor/ 中
- 需要修改 ueditor 源码时，直接修改 ueditor 目录下的文件，修改完执行：`cd ueditor` 和 `yarn grunt` 命令，此时会重新生成 ueditor 构建成功的文件到 vendor/ueditor
