mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:39:05 +08:00
feat: 添加 office-viewer 的编辑器插件 (#6501)
This commit is contained in:
吴多益
GitHub
parent
e3f6821155
commit
714a54be5c
@ -45,6 +45,8 @@ npm i --legacy-peer-deps
|
||||
npm start
|
||||
```
|
||||
|
||||
如果是开发编辑器，需要访问 `http://127.0.0.1:8888/packages/amis-editor/`
|
||||
|
||||
### 测试
|
||||
|
||||
```bash
|
||||
|
||||
@ -52,15 +52,15 @@ order: 23
|
||||
}
|
||||
```
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ----------------- | --------- | ------------- | ---------------------------------------------------------- |
|
||||
| classPrefix | `string` | 'docx-viewer' | 渲染的 class 类前缀 |
|
||||
| ignoreWidth | `boolean` | false | 忽略文档里的宽度设置，用于更好嵌入到页面里，但会减低还原度 |
|
||||
| padding | `string` | | 设置页面间距，忽略文档中的设置 |
|
||||
| bulletUseFont | `boolean` | true | 列表使用字体渲染，请参考下面的乱码说明 |
|
||||
| fontMapping | `object` | | 字体映射，是个键值对，用于替换文档中的字体 |
|
||||
| forceLineHeight | `string` | | 设置段落行高，忽略文档中的设置 |
|
||||
| enableReplaceText | `boolean` | true | 是否开启变量替换功能 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------- | --------- | ------------- | ---------------------------------------------------------- |
|
||||
| classPrefix | `string` | 'docx-viewer' | 渲染的 class 类前缀 |
|
||||
| ignoreWidth | `boolean` | false | 忽略文档里的宽度设置，用于更好嵌入到页面里，但会减低还原度 |
|
||||
| padding | `string` | | 设置页面间距，忽略文档中的设置 |
|
||||
| bulletUseFont | `boolean` | true | 列表使用字体渲染，请参考下面的乱码说明 |
|
||||
| fontMapping | `object` | | 字体映射，是个键值对，用于替换文档中的字体 |
|
||||
| forceLineHeight | `string` | | 设置段落行高，忽略文档中的设置 |
|
||||
| enableVar | `boolean` | true | 是否开启变量替换功能 |
|
||||
|
||||
### 关于渲染效果差异
|
||||
|
||||
@ -298,13 +298,18 @@ order: 23
|
||||
}
|
||||
```
|
||||
|
||||
## 是否显示 loading
|
||||
|
||||
通过 `"loading": true` 配置显示 loading
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ----------- | --------- | ------ | -------------------- |
|
||||
| src | Api | | 文档地址 |
|
||||
| enableVar | `boolean` | | 是否开启变量替换功能 |
|
||||
| wordOptions | `object` | | Word 渲染配置 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ----------- | --------- | ------ | --------------------- |
|
||||
| src | Api | | 文档地址 |
|
||||
| loading | `boolean` | false | 是否显示 loading 图标 |
|
||||
| enableVar | `boolean` | | 是否开启变量替换功能 |
|
||||
| wordOptions | `object` | | Word 渲染配置 |
|
||||
|
||||
## 动作表
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ import './cloest';
|
||||
import './classList';
|
||||
|
||||
// ios 没有这个会报错
|
||||
if (!'DragEvent' in window) {
|
||||
if (!('DragEvent' in window)) {
|
||||
Object.defineProperty(window, 'DragEvent', {
|
||||
value: class DragEvent {}
|
||||
});
|
||||
|
||||
@ -139,6 +139,7 @@ import './plugin/CodeView';
|
||||
import './plugin/WebComponent';
|
||||
import './plugin/CRUD2';
|
||||
import './plugin/ColumnToggler';
|
||||
import './plugin/OfficeViewer';
|
||||
import './plugin/Layout/Layout_sorption_container';
|
||||
import './plugin/Layout/Layout_fixed';
|
||||
// import './plugin/Layout/Layout1_2_v4';
|
||||
|
||||
106
packages/amis-editor/src/plugin/OfficeViewer.tsx
Normal file
106
packages/amis-editor/src/plugin/OfficeViewer.tsx
Normal file
@ -0,0 +1,106 @@
|
||||
import {registerEditorPlugin} from 'amis-editor-core';
|
||||
import {BaseEventContext, BasePlugin} from 'amis-editor-core';
|
||||
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
|
||||
|
||||
export class OfficeViewerPlugin extends BasePlugin {
|
||||
static scene = ['layout'];
|
||||
// 关联渲染器名字
|
||||
rendererName = 'office-viewer';
|
||||
$schema = '/schemas/OfficeViewerSchema.json';
|
||||
|
||||
// 组件名称
|
||||
name = '文档预览';
|
||||
isBaseComponent = true;
|
||||
description = 'Office 文档预览';
|
||||
docLink = '/amis/zh-CN/components/OfficeViewer';
|
||||
tags = ['展示'];
|
||||
icon = 'fa fa-file-word';
|
||||
pluginIcon = 'officeViewer-plugin';
|
||||
scaffold = {
|
||||
type: 'office-viewer'
|
||||
};
|
||||
previewSchema = {
|
||||
...this.scaffold
|
||||
};
|
||||
|
||||
panelTitle = '文档预览';
|
||||
|
||||
panelJustify = true;
|
||||
|
||||
panelBodyCreator = (context: BaseEventContext) => {
|
||||
return [
|
||||
getSchemaTpl('tabs', [
|
||||
{
|
||||
title: '属性',
|
||||
body: [
|
||||
getSchemaTpl('collapseGroup', [
|
||||
{
|
||||
title: '基本',
|
||||
body: [
|
||||
getSchemaTpl('officeUrl', {
|
||||
name: 'src',
|
||||
type: 'input-text',
|
||||
label: '文档地址'
|
||||
})
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Word 渲染配置',
|
||||
collapsed: true,
|
||||
body: [
|
||||
{
|
||||
type: 'combo',
|
||||
name: 'wordOptions',
|
||||
// panelJustify 下需要加这个
|
||||
mode: 'normal',
|
||||
noBorder: true,
|
||||
multiLine: true,
|
||||
items: [
|
||||
getSchemaTpl('switch', {
|
||||
label: '忽略宽度',
|
||||
inline: true,
|
||||
name: 'ignoreWidth'
|
||||
}),
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '页面内边距',
|
||||
name: 'padding'
|
||||
},
|
||||
getSchemaTpl('switch', {
|
||||
label: '列表使用字体',
|
||||
pipeIn: defaultValue(true),
|
||||
name: 'bulletUseFont',
|
||||
inline: true
|
||||
}),
|
||||
getSchemaTpl('switch', {
|
||||
label: '变量替换',
|
||||
name: 'enableVar',
|
||||
inline: true
|
||||
}),
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '强制行高',
|
||||
name: 'forceLineHeight'
|
||||
},
|
||||
{
|
||||
type: 'input-kv',
|
||||
label: '字体映射',
|
||||
name: 'fontMapping'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '外观',
|
||||
className: 'p-none'
|
||||
}
|
||||
])
|
||||
];
|
||||
};
|
||||
}
|
||||
|
||||
registerEditorPlugin(OfficeViewerPlugin);
|
||||
@ -16,6 +16,7 @@ import {
|
||||
ScopedContext
|
||||
} from 'amis-core';
|
||||
import type {Word} from 'office-viewer';
|
||||
import {Spinner} from 'amis-ui';
|
||||
|
||||
export interface OfficeViewerSchema extends BaseSchema {
|
||||
type: 'office-viewer';
|
||||
@ -110,8 +111,6 @@ export default class OfficeViewer extends React.Component<
|
||||
this.renderRemoteWord();
|
||||
} else if (name) {
|
||||
this.renderFormFile();
|
||||
} else {
|
||||
console.warn(`office-viewer must have src or name`);
|
||||
}
|
||||
}
|
||||
|
||||
@ -129,6 +128,11 @@ export default class OfficeViewer extends React.Component<
|
||||
this.fileName = finalSrc.split('/').pop();
|
||||
}
|
||||
|
||||
if (!finalSrc) {
|
||||
console.warn('file src is empty');
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await env.fetcher(finalSrc, data, {
|
||||
responseType: 'arraybuffer'
|
||||
});
|
||||
@ -176,8 +180,49 @@ export default class OfficeViewer extends React.Component<
|
||||
}
|
||||
|
||||
render() {
|
||||
const {classnames: cx, translate: __} = this.props;
|
||||
return <div ref={this.rootElement} className={cx('Office-Viewer')}></div>;
|
||||
const {
|
||||
classnames: cx,
|
||||
translate: __,
|
||||
className,
|
||||
loading = false,
|
||||
src,
|
||||
name,
|
||||
loadingConfig
|
||||
} = this.props;
|
||||
return (
|
||||
<div ref={this.rootElement} className={cx('Office-Viewer', className)}>
|
||||
{/* 避免没内容时编辑器都选不了 */}
|
||||
{(!src || !name) && (
|
||||
<svg width="100%" height="100" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="100%"
|
||||
height="100"
|
||||
style={{fill: '#F7F7F9'}}
|
||||
/>
|
||||
<text
|
||||
x="50%"
|
||||
y="50%"
|
||||
fontSize="18"
|
||||
textAnchor="middle"
|
||||
alignmentBaseline="middle"
|
||||
fontFamily="monospace, sans-serif"
|
||||
fill="#555555"
|
||||
>
|
||||
office viewer
|
||||
</text>
|
||||
</svg>
|
||||
)}
|
||||
|
||||
<Spinner
|
||||
overlay
|
||||
key="info"
|
||||
show={loading}
|
||||
loadingConfig={loadingConfig}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user