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

B 端物料组件库

---
title: 使用oss路径的富文本内容 & 只读状态
order: 3
---

# 使用oss文件内容渲染富文本内容 & 只读状态

````jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { PowerEditor } from '@aliretail/react-materials-components';
import { Button } from '@alifd/next';
window.React = React;

import './index.scss';

class App extends Component {
  state = {
    value: '',
    path: 'https://oneapi.alibaba-inc.com/mock/aliretail_materials/power-editor-path',
    readOnly: false
  };

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

  render() {
    const { readOnly } = this.state;
    return (
      <>
        <div>
          <PowerEditor path={this.state.path} onChange={this.onChange.bind(this)} readOnly={readOnly}/>
        </div>
        <Button
          style={{ marginTop: '20px' }}
          onClick={() => {
            this.setState({
              readOnly: !readOnly
            });
          }}
        >切换readOnly状态</Button>
      </>
    );
  }
}

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