Rechextor

一个基于 slate 封装的轻量级 React 富文本编辑器

安装

npm install rechextor --save

使用

import Rechextor from 'rechextor';
 
class App extends React.Component {
  state = { value: '' };
 
  handleChange = value => {
    this.setState({ value });
  };
 
  handleSuccess = (result, insertImage) => {
    // result 为上传图片的 http response body
    // insertImage 为一个回调函数，接受一个 url 作为参数，只有调用此函数才能插入图片
    insertImage(result.data.url);
  };
 
  render() {
    return (
      <Rechextor
        tools={[
          'bold',
          'strong',
          'italic',
          'underline',
          'strikethrough',
          'image',
          'tag',
          'blockquote',
          'line'
        ]}
        initialValue={this.state.value}
        placeholder="To be continued..."
        onChange={this.handleChange}
        uploadPath="/upload"
        onUploadSuccess={this.handleSuccess}
      />
    );
  }
}

API

组件接受以下参数

参数名	描述	类型	默认值
tools	工具栏列表，目前支持的工具见使用	string[]
initialValue	编辑器渲染的初始内容，此值只在第一次 Boolean(initialValue) 为 true 时生效，后续的更新会被忽略	string
placeholder	编辑器无内容时显示的 placeholder	string
onChange	用于同步编辑器的更改，接受一个 html 字符串作为参数	function
uploadPath	图片上传服务器地址，需要配合 onUploadSuccess 一起使用	string
onUploadSuccess	图片上传成功的回调，说明见使用	function
beforeUpload	图片上传之前的回调，详见 rc-upload	function
onUploadError	图片上传失败的回调	function
onBlur	编辑器失去焦点的回调	function
onFocus	编辑器获得焦点的回调	function