部署 OfficeJS Fabric React Word 插件
创始人
2025-01-07 06:00:11
0

要部署 OfficeJS Fabric React Word 插件,可以按照以下步骤进行操作:

  1. 创建一个 Office Add-in 项目:

    yo office
    

    选择 Word Add-in,并选择 Fabric React as UI library。

  2. 安装 Office JavaScript API 的 typings:

    npm install --save-dev @types/office-js
    
  3. 安装 Fabric React 相关的库:

    npm install --save office-ui-fabric-react
    
  4. 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 = () => { // 处理按钮点击事件的逻辑 };
  5. src/taskpane/components/App.tsx 文件中将 Taskpane 组件添加到 App 组件中:

    import * as React from 'react';
    import { Taskpane } from './Taskpane';
    
    export const App = () => {
      return (
        
    ); };
  6. 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'));
    };
    
  7. manifest.xml 文件中配置插件的信息和功能。例如,可以添加一个按钮在 Word 的标题栏上:

    
      YourAddinId
      1.0.0.0
      ...
      
        
      
      
        
      
      ReadWriteDocument