@aliretail/react-materials-components/demo/PowerEditor/normal.md

B 端物料组件库

---
title: 富文本
order: 1
---

# 普通富文本内容
点击「图片上传」和「视频上传」进行本地上传

````jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { PowerEditor } from '@aliretail/react-materials-components';
import './index.scss';

class App extends Component {
  state = {
    value: '<div style=\"clear: both;\"><div><div><div><div><img style=\"width: 100%; vertical-align: bottom;\" src=\"https://fh01-sit-bucket.oss-cn-beijing.aliyuncs.com/fhmall/feiHeMall/materials/20210428/08c3b3b15ec949ef0b04866137dcfeba.png\"></div><img style=\"width: 100%; vertical-align: bottom;\" src=\"https://fh01-sit-bucket.oss-cn-beijing.aliyuncs.com/fhmall/feiHeMall/materials/20210428/2518cf2fab921cff479d92d549aef997.png\"></div><img style=\"width: 100%; vertical-align: bottom;\" src=\"https://fh01-sit-bucket.oss-cn-beijing.aliyuncs.com/fhmall/feiHeMall/materials/20210428/a28e9290ab4c405e9f86fea08a3cdeb6.png\"></div><img style=\"width: 100%; vertical-align: bottom;\" src=\"https://fh01-sit-bucket.oss-cn-beijing.aliyuncs.com/fhmall/feiHeMall/materials/20210428/966ebe14c1a4241cc7fc5b906eca1426.png\"></div><img style=\"width: 100%; vertical-align: bottom;\" src=\"https://fh01-sit-bucket.oss-cn-beijing.aliyuncs.com/fhmall/feiHeMall/materials/20210428/6d1e2967fabde11bad612df068503831.png\">1</div>'
  };

  onChange(value) {
    this.setState({
      value
    })
  }

  render() {
    const { value } = this.state;
    console.log(`value值变更为：${value}`);
    return (
      <div>
        <PowerEditor value={value} onChange={this.onChange.bind(this)}/>
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);
````