OnlyOfficeEditor组件
01. 说明
此组件可用来在线编辑word文件。
02. API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
height | 必须由外面设置宽 | number | 无 |
width | 必须由外面设置高 | number | 无 |
organizationId | 租户id | number | 默认值是当前租户ID |
bucketName | 桶名必输 | string | 无 |
url | 文件的url | string | 无 |
storageCode | 存储编码 | string | 无 |
permission | 权限字段 | object | 无 |
03. 使用示例
使用OnlyOfficeEditor组件
import OnlyOfficeEditor from 'components/OnlyOfficeEditor';
export default class DetailWordEditor extends Component {
constructor(props) {
super(props);
this.onlyOfficeEditorRef = React.createRef();
this.state = {
saving: false,
onlyOfficeEditorConfig: {
url: record.fileUrl,
organizationId: record.tenantId,
bucketName: record.bucketName,
bucketDirectory: record.directory,
storageCode: record.storageCode,
autoFocus: true, // 虽然没有起作用
permission: {
changeReview: true,
comment: false,
dealWithReview: true,
dealWithReviewOnly: false,
download: true,
edit: true,
print: true,
review: true,
},
},
};
}
render() {
const { saving = false, onlyOfficeEditorConfig = {} } = this.state;
return (
<React.Fragment>
<Content
style={{
height: '100%',
}}
>
<OnlyOfficeEditor
{...onlyOfficeEditorConfig}
width="100%"
height="100%"
ref={this.onlyOfficeEditorRef}
/>
</Content>
</React.Fragment>
);
}
}