Skip to content
a ueditor component for react
JavaScript HTML CSS PHP Java ASP Other
Branch: master
Clone or download
Latest commit 4e09235 Apr 28, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example 修改插件实现 Apr 26, 2019
lib build Apr 26, 2019
src 修改插件实现 Apr 26, 2019
ueditor Merge branch 'master' into more-extension Jan 7, 2019
vendor/ueditor Fix error Can not get source from undefined Jan 7, 2019
.babelrc Update babel plugins Jan 2, 2019
.eslintrc.js add eslint and fix errors Nov 22, 2017
.gitignore Initial commit Sep 30, 2017
CHANGELOG.md 版本号升级至 2.3.0 Apr 28, 2019
LICENSE Initial commit Sep 30, 2017
README.md
favicon.ico Optimize the examples Jan 4, 2019
package.json
yarn.lock Add more examples Jan 3, 2019

README.md

react-ueditor

react-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,指定插件。

插件分为两种,一种是内置的插件,一种是自定义的插件。现支持内置插件如下:

  1. insertCode 插入代码块
  2. uploadImage 上传图片
  3. uploadVideo 上传视频
  4. uploadAudio 上传音频
  5. 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 实例。详细内容,请参考官方文档

插件使用示例

  1. 内置插件

    <ReactUeditor
      ...
      plugins={[
        'insertCode',
        'uploadImage',
        'uploadVideo',
        'uploadAudio',
        'insertLink',
      ]}
      ...
    />
  2. 自定义插件

    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

PRs Welcome

如果你希望为这个项目贡献代码,需要了解以下情况:

  • 在根目录下执行 yarn start 会启动开发服务器,此时会在浏览器中展示 ReactUeditor 的真实效果,在 ReactUeditor/ 下的修改都会进行热更新

  • example.js, index.html, dist/ 都只是为了展示 ReactUeditor 的真实效果,主要代码在 ReactUeditor/ 中

  • 需要修改 ueditor 源码时,直接修改 ueditor 目录下的文件,修改完执行:cd ueditoryarn grunt 命令,此时会重新生成 ueditor 构建成功的文件到 vendor/ueditor

You can’t perform that action at this time.