要部署 OfficeJS Fabric React Word 插件,可以按照以下步骤进行操作:
创建一个 Office Add-in 项目:
yo office
选择 Word Add-in,并选择 Fabric React as UI library。
安装 Office JavaScript API 的 typings:
npm install --save-dev @types/office-js
安装 Fabric React 相关的库:
npm install --save office-ui-fabric-react
在 src/taskpane/components/Taskpane.tsx
文件中使用 Fabric React 组件构建 Word 插件的界面。例如,可以使用 Button
组件:
import * as React from 'react';
import { Button } from 'office-ui-fabric-react';
export const Taskpane = () => {
return (
Welcome to Office Add-in!
);
};
const handleClick = () => {
// 处理按钮点击事件的逻辑
};
在 src/taskpane/components/App.tsx
文件中将 Taskpane
组件添加到 App
组件中:
import * as React from 'react';
import { Taskpane } from './Taskpane';
export const App = () => {
return (
);
};
在 src/taskpane/index.tsx
文件中渲染 App
组件:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { App } from './components/App';
Office.initialize = () => {
ReactDOM.render( , document.getElementById('container'));
};
在 manifest.xml
文件中配置插件的信息和功能。例如,可以添加一个按钮在 Word 的标题栏上:
YourAddinId
1.0.0.0
...
ReadWriteDocument
showMessage
...
使用命令行工具构建插件:
npm run build
打包插件:
yo office:addin
在 manifest.xml
文件中的 DefaultSettings/SourceLocation
中指定打包后的插件文件路径。
在 Office 中加载插件进行测试。
这样,你就可以成功部署 OfficeJS Fabric React Word 插件了。