ifanrxreact-ueditor
使用 react 框架对 ueditor 进行封装和扩展
✨ 特性
- 支持更灵活的图片和音视频资源上传
- 支持同个页面存在多个编辑器实例
- 支持对复制进来的图片进行操作
- 允许扩展工具栏，支持在扩展中使用已有的 react 组件
📦 下载
# 使用 npm 安装
npm install ifanrx-react-ueditor --save
# 使用 yarn 安装
yarn add ifanrx-react-ueditor🔨 使用
import ReactUeditor from 'ifanrx-react-ueditor'
<ReactUeditor
ueditorPath={`${window.YOUR_PATH}/ueditor`}"
/>🔌 插件
extendControls 已不推荐使用，请直接使用 plugins，指定插件。
插件分为两种，一种是内置的插件，一种是自定义的插件。现支持内置插件如下：
- insertCode 插入代码块
- uploadImage 上传图片
- uploadVideo 上传视频
- uploadAudio 上传音频
- insertLink 添加链接
内置插件，直接传入插件的名称即可。自定义插件则是传入一个 Function，类型定义（使用 typescript 只为了说明类型）为：
interface IPlugin {
(ueditor: UEditor): IPluginConfig
}
interface IPluginConfig {
cssRules: String
menuText: String
onIconClick?: () => void
render: (visible: Boolean, closeModal: () => void) => React.ReactElement<any>
title?: String
}UEditor 为 UEditor 实例。详细内容，请参考官方文档
插件使用示例
内置插件
<ReactUeditor ... plugins={[ 'insertCode', 'uploadImage', 'uploadVideo', 'uploadAudio', 'insertLink', ]} ... />自定义插件
const uploadImagePlugin = ueditor => { return { menuText: '图片上传', cssRules: 'background-position: -726px -77px;', render: (visible, closeModal) => { const handleSelectImage = (url) => { ueditor.focus() ueditor.execCommand('inserthtml', `<img src="${url}" />`) closeModal() } return <Modal visible={visible} onSelectImage={handleSelectImage} /> } } } <ReactUeditor ... plugins={[uploadImagePlugin]} ... />
更多功能请移步到 react-ueditor 的 wiki 页面
🤝 贡献
 kailunyao |
 larry011 |
如果你希望为这个项目贡献代码，需要了解以下情况：
在根目录下执行
yarn start会启动开发服务器，此时会在浏览器中展示 ReactUeditor 的真实效果，在 ReactUeditor/ 下的修改都会进行热更新example.js, index.html, dist/ 都只是为了展示 ReactUeditor 的真实效果，主要代码在 ReactUeditor/ 中
需要修改 ueditor 源码时，直接修改 ueditor 目录下的文件，修改完执行：
cd ueditor和yarn grunt命令，此时会重新生成 ueditor 构建成功的文件到 vendor/ueditor