@aliretail/react-materials-components
Version:
41 lines (34 loc) • 1.7 kB
Markdown
---
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);
````