@aliretail/react-materials-components/demo/FormComponents/powerEditor.md

B 端物料组件库

---
title: PowerEditor
order: 200
---

```jsx
import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import { FormComponents } from '@aliretail/react-materials-components';
const { setup, SchemaForm, SchemaMarkupField: Field } = FormComponents;
import PowerEditor from '../../src/FormComponents/powerEditor';
// 如果是包引用
// import PowerEditor from '@alife/aliretail-form-components/lib/powerEditor';
import './index.scss';

setup({
  PowerEditor,
});

const marginStyle = {
  marginBottom: '20px',
};

const App = () => {
  return (
    <>
      <SchemaForm
        defaultValue={{
          text: '233',
          text1: '请点击图片上传或上传视频以查看效果',
          readOnly: 'aaa',
          editable: '试一下editable',
          customerReadonly: 'customerReadonly',
        }}
        onChange={console.log}
      >
        <Field
          style={marginStyle}
          title="本地上传图片和视频的富文本"
          name="text"
          x-component="PowerEditor"
        />
        <Field
          style={marginStyle}
          title="从接口中获取内容"
          name="text3"
          x-component="PowerEditor"
          x-component-props={{
            path: 'https://mocks.alibaba-inc.com/mock/aliretail_materials/power-editor-path',
          }}
        />
        <Field
          style={marginStyle}
          title="从素材库上传图片和视频"
          name="text1"
          x-component="PowerEditor"
          x-component-props={{
            materialCode: 'mall_material',
          }}
        />
        <Field
          style={marginStyle}
          title="readOnly"
          name="readOnly"
          readOnly
          x-component="PowerEditor"
        />
        <Field
          style={marginStyle}
          title="editable 从接口中获取内容"
          name="editable"
          editable={false}
          x-component="PowerEditor"
          x-component-props={{
            path: 'https://mocks.alibaba-inc.com/mock/aliretail_materials/power-editor-path',
          }}
        />
        <Field
          style={marginStyle}
          title="customerReadonly"
          name="customerReadonly"
          editable={false}
          x-component="PowerEditor"
          x-component-props={{
            readOnlyRender: (props) => {
              const click = () => {
                console.log('component props:', props);
              };
              return <button onClick={click}>查看详情</button>;
            },
          }}
        />
      </SchemaForm>
    </>
  );
};

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