react-ueditor-component

ueditor的react封装版，修改了ueditor中的获取服务器端配置实现，更符合前后端分离的思想

使用assets中的utf8-php.zip才能正常使用上传文件功能，所有ueditor源码改动都用MARK:做了标记，解压该文件可以查看具体改动

ueditor基于官方1.4.3.3分支修改，功能还在不断完善中

Features

1. 接收value和onChange，使用起来就像input一样简单，与antd的表单双向绑定配合使用更简单
2. 上传文件增加beforeUpload钩子，可在上传前修改需要上传的文件、数据和请求头，对接第三方OSS易如反掌

安装

npm install react-ueditor-component --save-dev

或者

yarn add react-ueditor-component --save

使用

下载修改后打包的ueditor.zip，或者找到node_modules/react-ueditor-component/assets/utf8-php.zip，解压文件，放在网站的根目录，react项目一般放在public文件夹下， index.html中script标签引入ueditor代码

<script src="/utf8-php/ueditor.config.js"></script>
<script src="/utf8-php/ueditor.all.js"></script>

引入ReactUEditorComponent组件

import ReactUEditorComponent from 'react-ueditor-component';

export default class App extends React.Component {
  state = {
    value: '',
    serverExtra: {
      // 上传文件额外请求头
      headers: {
        Auth: 'token'
      },
      // 上传文件额外的数据
      extraData: {
        desc: 'more data'
      }
    }
  }

  onChange = (value) => this.setState(value);

  render () {
    return (
      <ReactUEditorComponent
        value={this.state.value}
        onChange={this.onChange}
        ueditorOptions={{
          serverOptions: {
            /* 上传图片配置项 */
            imageActionName: 'uploadimage', /* 执行上传图片的action名称 */
            imageFieldName: 'file', /* 提交的图片表单名称 */
            imageMaxSize: 2048000, /* 上传大小限制，单位B */
            imageAllowFiles: ['.png', '.jpg', '.jpeg', '.gif', '.bmp'], /* 上传图片格式显示 */
            imageCompressEnable: true, /* 是否压缩图片,默认是true */
            imageCompressBorder: 1600, /* 图片压缩最长边限制 */
            imageInsertAlign: 'none', /* 插入的图片浮动方式 */
            imageUrlPrefix: '', /* 图片访问路径前缀 */
            imageResponseKey: 'fileURL' //! 图片上传接口response中包含图片路径的键名
          },
          // 上传文件时的额外信息
          serverExtra: this.state.serverExtra,
          serverUrl: 'http://upload.com' // 上传文件的接口
        }}
      />
    )
  }
}

API

| 参数 | 说明 | 类型 | 默认值 | |-|-|-|-| | value | 设置编辑器的内容 | string | - | | onChange | 编辑器内容变化回调 | Function(value) | - | | setExtraDataComplete | 设置上传文件额外数据完成事件 | Function() | - | | ueditorOptions | 编辑器初始化的配置，在官方文档支持的参数上增加了一些内容，除serverExtra外不能动态变动 | object | 见下文 |

ueditorOptions

默认值：

{
  autoHeightEnabled: false,
  toolbars: [[
    'fullscreen', /*  */ 'source', '|', 'undo', 'redo', '|',
    'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
    'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
    'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
    'directionalityltr', 'directionalityrtl', 'indent', '|',
    'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
    'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
    'simpleupload',  'insertimage', 'emotion', 'scrawl', 'insertvideo', /* 上传视频 , */ /* 'music', 'attachment', */ /* 'map', 'gmap', */ 'insertframe', 'insertcode', /* 'webapp', */ 'pagebreak', /* 'template', */ /* 'background', */ '|',
    'horizontal', 'date', 'time', 'spechars', /* 'snapscreen',  'wordimage', */'|',
    'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', /* 'charts', */ '|',
    'print', 'preview', 'searchreplace', 'drafts', 'help'
  ]],
  // 图片转存关闭
  catchRemoteImageEnable: false,            initialFrameWidth: '100%',
  serverOptions: {
    /* 上传图片配置项 */
    imageActionName: 'uploadimage', /* 执行上传图片的action名称 */
    imageFieldName: 'file', /* 提交的图片表单名称 */
    imageMaxSize: 2048000, /* 上传大小限制，单位B */
    imageAllowFiles: ['.png', '.jpg', '.jpeg', '.gif', '.bmp'], /* 上传图片格式显示 */
    imageCompressEnable: true, /* 是否压缩图片,默认是true */
    imageCompressBorder: 1600, /* 图片压缩最长边限制 */
    imageInsertAlign: 'none', /* 插入的图片浮动方式 */
    imageUrlPrefix: '', /* 图片访问路径前缀 */
    imageResponseKey: 'url', // ! 图片上传接口response中包含图片路径的键名

    /* 涂鸦图片上传配置项 */
    scrawlActionName: 'uploadscrawl', /* 执行上传涂鸦的action名称 */
    scrawlFieldName: 'file', /* 提交的图片表单名称 */
    scrawlPathFormat: '/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}', /* 上传保存路径,可以自定义保存路径和文件名格式 */
    scrawlMaxSize: 2048000, /* 上传大小限制，单位B */
    scrawlUrlPrefix: '', /* 图片访问路径前缀 */
    scrawlInsertAlign: 'none',
    scrawlResponseKey: 'url', /* 涂鸦图片上传接口response中包含图片路径的键名 */

    /* 上传视频配置 */
    videoActionName: 'uploadvideo', /* 执行上传视频的action名称 */
    videoFieldName: 'file', /* 提交的视频表单名称 */
    videoPathFormat: '/ueditor/php/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}', /* 上传保存路径,可以自定义保存路径和文件名格式 */
    videoUrlPrefix: '', /* 视频访问路径前缀 */
    videoMaxSize: 102400000, /* 上传大小限制，单位B，默认100MB */,
    videoResponseKey: 'url',
    videoAllowFiles: [
      '.flv', '.swf', '.mkv', '.avi', '.rm', '.rmvb', '.mpeg', '.mpg',
      '.ogg', '.ogv', '.mov', '.wmv', '.mp4', '.webm', '.mp3', '.wav', '.mid'
    ]
  }
}

toolbars中被注释的内容都是当前版本不能完美支持的功能，将在后续的版本中完善

上传配置

ueditorOptions.serverOptions 将后端配置迁移到前端，支持官方文档的参数，在这基础上增加了：

imageResponseKey: 上传图片成功后，后台返回的json数据中包含图片地址信息的字段名

比如配置为

{
  imageUrlPrefix: 'http://demo.com/', /* 图片访问路径前缀 */
  imageResponseKey: 'url', //
}

上传成功后后台返回的数据为

{
  url: 'demo.jpg'
}

则生成的图片地址为http://demo.com/demo.jpg(这里指编辑器的内容中插入的图片地址字符串，而不是服务器存储的地址，服务器把上传文件存在哪里完全有服务端决定)

scrawlResponseKey: 涂鸦上传成功后，后台返回的json数据中包含图片地址信息的字段名

videoResponseKey: 视频上传成功后，后台返回的json数据中包含视频地址信息的字段名

上传接口

ueditorOptions.serverUrl type: string必填

上传接口额外数据

ueditorOptions.serverExtra 上传接口的额外数据，可动态变动

<ReactUEditorComponent 
  ueditorOptions={{
    serverUrl: 'http://upload.com',
    serverExtra: {
      headers: {
        auth: 'token'
      },
      extraData: {
        author: 'author'
      }
    }
  }}
/>

如上例子在调用上传接口时header会增加auth: token， body中会增加author: author

上传前钩子

ueditorOptions.beforeUpload File => File | Promise

接收预上传的文件，需要返回File或者Promise, 如果返回Promise，需要resolve一个File

设置额外数据完成钩子

setExtraDataComplete 应用场景：上传钩子中设置上传额外数据，防止额外数据设置完成前就已经开始上传，可以使用安全的setExtraDataComplete钩子

应用场景举例：七牛云上传前需要调用后台接口获取上传凭证

export default class App extends React.Component {
  state = {
    value: '',
    serverExtra: {
      // 上传文件额外的数据
      extraData: {}
    }
  }

  beforeUpload = file => new Promise((resolve, reject) => {
    let key = 't' + Math.random().toString().slice(5, 16);

    // 请求服务器，获取七牛上传凭证
    fetch('getuploadtoken.com', {
      headers
    })
      .then(response => response.json())
      .then((data) => {
        // 设置七牛直传额外数据
        this.setState({
          serverExtra: {
            extraData: {
              token: data.token,
              key
            }
          },
          setExtraDataComplete: () => {
            resolve(file);
          }
        });
      });
  })

  onChange = (value) => this.setState(value);

  render () {
    return (
      <ReactUEditorComponent
        value={this.state.value}
        onChange={this.onChange}
        // 必须在state中
        setExtraDataComplete={this.state.setExtraDataComplete}
        ueditorOptions={{
          beforeUpload: this.beforeUpload,
          // 上传文件时的额外信息
          serverExtra: this.state.serverExtra,
          serverUrl: 'http://qiniuupload.com' // 上传文件的接口
        }}
      />
    )
  }
}

Contribution

如何运行项目

请查看wiki了解如何运行项目