能否在非React/Angular环境下为Word Online MVC加载项集成Office UI Fabric？

Office UI Fabric（现在也演进为Fluent UI）本身就提供了纯HTML/CSS/JavaScript的实现版本，专门适配没有前端框架的开发场景，正好匹配你的MVC项目需求。下面结合你的场景一步步说明怎么操作：

1. 先明确可用的Office UI Fabric资源 #

你需要关注两个核心部分：

• Office UI Fabric Core：纯CSS样式库，提供所有Office风格的控件样式（比如文本框、按钮、表单布局等），不需要任何JS框架，直接给HTML元素加类名就能生效。
• Office UI Fabric JS：纯JavaScript组件库，实现了带交互的控件（如下拉菜单、对话框、日期选择器等），同样不需要React/Angular，直接通过原生JS初始化即可。

因为你提到关联MVC项目时Office UI Fabric会自动添加，大概率已经通过NuGet安装了相关包；如果没有的话，手动安装也很简单：

• 安装Core包：在NuGet包管理器中搜索OfficeUIFabric.Core并安装
• 安装JS包：搜索OfficeUIFabric.JS并安装

2. 在MVC项目中引入资源 #

打开你的MVC项目的_Layout.cshtml（或者专门用于加载项视图的布局文件），添加以下引用：

引入CSS（Fabric Core） #

@Styles.Render("~/Content/office-ui-fabric-core/css/fabric.min.css")

引入JS（Fabric JS，仅当需要交互组件时添加） #

@Scripts.Render("~/Scripts/office-ui-fabric-js/js/fabric.min.js")

3. 在加载项视图中构建Office风格的表单 #

现在你可以在MVC的视图（比如任务窗格的视图文件）中，用纯HTML结合Fabric的类名来创建表单。举个简单的例子：

<div class="ms-Grid" style="padding: 20px;">
  <div class="ms-Grid-row">
    <div class="ms-Grid-col ms-sm-12">
      <div class="ms-TextField">
        <label class="ms-Label">输入内容</label>
        <input class="ms-TextField-field" type="text" id="inputText" placeholder="请输入文本">
      </div>
    </div>
  </div>
  <div class="ms-Grid-row" style="margin-top: 15px;">
    <div class="ms-Grid-col ms-sm-12">
      <button class="ms-Button ms-Button--primary" id="submitBtn">
        <span class="ms-Button-label">提交到Word</span>
      </button>
    </div>
  </div>
</div>

4. 给控件添加交互（如果需要） #

如果使用了需要交互的组件（比如下拉菜单），或者要给按钮绑定事件，直接用原生JS即可。比如给上面的提交按钮绑定点击事件，调用Word API插入内容：

document.getElementById('submitBtn').addEventListener('click', async () => {
  const inputValue = document.getElementById('inputText').value;
  if (!inputValue) return;

  // 调用Word API插入文本
  await Word.run(async (context) => {
    const range = context.document.getSelection();
    range.insertText(inputValue, Word.InsertLocation.end);
    await context.sync();
  });
});

如果是Fabric的交互组件（如下拉菜单），初始化方式也很简单：

// 初始化下拉菜单
const dropdownElement = document.getElementById('myDropdown');
new fabric['Dropdown'](dropdownElement);

额外说明 #

现在微软已经将Office UI Fabric升级为Fluent UI，如果你想使用最新的Office风格控件，也可以选择Fluent UI的vanilla JavaScript版本（不需要框架），用法和上面类似，只是类名和资源引用略有不同，但核心逻辑一致。

总之，完全不需要引入React或Angular就能在你的MVC Word加载项中实现Office风格的界面，放心用就好！

内容的提问来源于stack exchange，提问作者Gertsen