react-ueditor-xiu v1.0.0

react-ueditor-xiumi

下载

  github: npm i https://gitee.com/ygunoil/react-ueditor-xiumi.git -S
  npm:    npm i react-ueditor-xiumi -S
  yarn:   yarn add react-ueditor-xiumi

使用

引入 Ueditor 文件夹

拷贝该项目 vendor 目录下的 ueditor（经过修改）到你的项目下

使用组件

import ReactUeditor from 'react-ueditor-xiumi'

<ReactUeditor
  config={{zIndex: 1001}}
  onChange={this.updateEditorContent}
  plugins={['uploadImage', 'insertCode']}
  uploadImage={this.uploadImage}
  ueditorPath={`${window.YOUR_PATH}/ueditor`}"
  value="Hello World!"
/>

plugins 现支持：

• 图片上传 uploadImage
• 视频上传 uploadVideo
• 音频上传 uploadAudio
• 插入代码 insertCode

配置

ueditor 主要通过ueditor.config.js 文件来配置，在存在多个编辑器示例而配置有所差异的场景下，可将部分参数传入到 config 属性中，具体配置可参考 (ueditor 配置说明)http://fex.baidu.com/ueditor/#start-config

获取实时更新数据

通过 onChange 可获取实时更新的数据，其返回 string 类型（也可以通过 getRef 方法获取 ueditor 实例，直接获取编辑器内容，详情见后面的示例）

updateEditorContent = content => {
  // 此处勿通过 setState 更新 value，若用于提交表单场景，可将 content 赋值于一变量，在提交时从变量中获取最后结果即可，如：
  // this.result = content
}

图片上传

ueditor 的图片上传功能与后端耦合性很大，在前后端分离大行其道的今天，并不是很适合，因此我们新增了图片上传的回调的接口。

<ReactUeditor
  ...
  uploadImage={this.uploadImage}
/>

// uploadImage 必须返回一个 promise
uploadImage = e => {
  return new Promise(function(resolve, reject) {
    let file = e.target.files[0]

    // 在这里将你的图片上传到服务器，在上传成功的回调中执行
    resolve(imgUrl)
  })
}

视频上传和音频上传与图片上传的方法一致

直接操作 ueditor 实例

react-ueditor 提供的接口并不多，并不能满足大部分开发者的需求，因此我们也提供让开发者获取 ueditor 实例的接口，供开发者直接操作 ueditor 对象，例如获取编辑器内容:

<ReactUeditor
  getRef={this.getUeditor}
  ...
/>

// 该方法在 ReactUeditor 被渲染后会自动执行
getUeditor = ref => {
  this.ueditor = ref
}

// getContent 为 ueditor 的内部方法
getEditorContent = () => {
  console.log(this.ueditor.getContent())
}

贡献

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

• 执行 yarn run start 会启动开发服务器，此时会在浏览器中展示 ReactUeditor 的真实效果

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

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

贡献者