npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2019 – Ryan Hefner

react-ueditor

v1.1.2

Published

an ueditor component for react

Downloads

336

Maintainers

einsqingeinsqing

Keywords

ueditorreact

Readme

react-ueditor

react-ueditor

下载

  npm i git://[email protected]:ifanrx/react-ueditor.git -S

使用

下载 Ueditor 编辑器

到 ueditor 官网地址 下载最新版本的 ueditor, 我们选用的是1.4.3.3 PHP 版本,将下载解压后的文件夹放入项目中。

这里推荐直接使用该项目 vendor 目录下的 ueditor,ueditor 并未对单页面应用的提供很好的支持,vendor 目录下的 ueditor 是经过我们修改过的版本。

使用组件

import ReactUeditor from 'react-ueditor'

<ReactUeditor
  config={{zIndex: 1001}}
  onChange={this.updateEditorContent}
  plugins={['uploadImage', 'insertCode']}
  uploadImage={this.uploadImage}
  ueditorPath="/static/uf8-php"
  value="Hello World!"
/>
PropertyDescriptionTypeMust
config在实例化时传入配置参数objno
onChange编辑器内容改变的回调funcno
plugins需要使用的插件arrayno
progress上传进度numno
ueditorPathueditor 构建后的文件路径stringyes
uploadAudio音频上传回调funcno
uploadImage图片上传回调funcno
uploadVideo视频上传回调funcno
value初始化值stringno

plugins 现支持:

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

配置

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

获取实时更新数据

通过 onChange 可获取实时更新的数据,其返回 string 类型

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)
  })
}

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

贡献

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

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

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

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