教程中的 Microsoft Office 加载项无响应答案

【问题标题】：Microsoft Office Add-in from Tutorial Not Responsive教程中的 Microsoft Office 加载项无响应
【发布时间】：2019-08-12 06:19:23
【问题描述】：

我正在使用本教程构建 Microsoft Word 插件：https://docs.microsoft.com/en-us/office/dev/add-ins/tutorials/word-tutorial。

我在 Microsoft Word 2016 for Mac 上运行它。

我遇到了几个问题，可能是相关的：

最初加载项在我侧加载后在 Word 中运行。然后，我进行了更新，运行命令“npm run build”，然后运行“npm start”，然后关闭 Word 并再次打开并侧载加载项。我现在看到按钮发生了变化（根据我刚刚所做的更改），但是当我单击按钮时它们不起作用。我尝试重新构建项目并重新启动它几次，但按钮不起作用。
当我尝试在 https://localhost:3000 上的浏览器中加载加载项时，我可以看到浏览器中的按钮，但它表示连接不安全。我按照以下说明安装了自签名证书：https://github.com/OfficeDev/generator-office/blob/master/src/docs/ssl.md。但它仍然没有工作。

任何帮助将不胜感激。


(function () {
    Office.initialize = function (reason) {
        $(document).ready(function () {

            // TODO1: Determine if the user's version of Office supports all the
            //        Office.js APIs that are used in the tutorial.
            if (!Office.context.requirements.isSetSupported('WordApi', '1.3')) {
                console.log('Sorry. The tutorial add-in uses Word.js APIs that are not available in your version of Office.');
            }

            // TODO2: Assign event handlers and other initializaton logic.
            $('#insert-paragraph').click(insertParagraph);
            $('#apply-style').click(applyStyle);
            $('#apply-custom-style').click(applyCustomStyle);
            $('#change-font').click(changeFont);
            $('#insert-text-into-range').click(insertTextIntoRange);
            $('#insert-text-outside-range').click(insertTextBeforeRange);
            $('#replace-text').click(replaceText);
            $('#insert-image').click(insertImage);
            $('#insert-html').click(insertHTML);
            $('#insert-table').click(insertTable);

        });
    };

// TODO3: Add handlers and business logic functions here.
    function insertParagraph() {
      Word.run(function (context) {

            // TODO4: Queue commands to insert a paragraph into the document.
            var docBody = context.document.body;
            docBody.insertParagraph("Office has several versions, including Office 2016, Office 365 Click-to-Run, and Office on the web.",
                                    "Start");

            return context.sync();
        })
        .catch(function (error) {
            console.log("Error: " + error);
            if (error instanceof OfficeExtension.Error) {
                console.log("Debug info: " + JSON.stringify(error.debugInfo));
            }
        });
    }

    function applyStyle() {
      Word.run(function (context) {

          // TODO1: Queue commands to style text.
          var firstParagraph = context.document.body.paragraphs.getFirst();
          firstParagraph.styleBuiltIn = Word.Style.intenseReference;

          return context.sync();
      })
      .catch(function (error) {
          console.log("Error: " + error);
          if (error instanceof OfficeExtension.Error) {
              console.log("Debug info: " + JSON.stringify(error.debugInfo));`
          }
      });
    }

【问题讨论】：

信任证书后安全错误是否消失？是在任务窗格或功能区中不起作用的按钮吗？如果在任务窗格中，请分享您为按钮分配处理程序的代码和处理程序的代码。
瑞克，谢谢您的回复。当我信任证书时，安全错误并没有消失。不起作用的按钮位于任务窗格中。下面是我为按钮分配处理程序的代码和处理程序的代码。
我在上面添加了相关代码。
我解决了这个问题。本教程指导用户添加以下代码行：import { base64Image } from "./base64Image";。当我删除该行时，加载项又开始工作了。

标签： office-js

【解决方案1】：

我解决了这个问题。本教程指导用户添加以下代码行：import { base64Image } from "./base64Image";。当我删除该行时，加载项又开始工作了。

【讨论】：