Office Word JS API：如何设置光标处新输入文本的字体格式

需求说明 #

• 作为Office Add-ins新手，希望实现：勾选任务窗格复选框后，Word光标位置新输入的文本自动应用加粗+下划线格式，且不修改已有文本。

现有代码（未实现预期效果） #

Office.onReady((info) => {
    if (info.host === Office.HostType.Word) {
      document.getElementById("status-changing-chkbox").onclick = () => chkboxOnClicked;
    }
});

function chkboxOnClicked() {
  const chkbox = document.getElementById("status-changing-chkbox");
  const doc = Office.context.document;
  if (chkbox.checked === true) {
    doc.addHandlerAsync(
      Office.EventType.DocumentSelectionChanged,
      changeFont
    );
  } else {
    doc.removeHandlerAsync(
      Office.EventType.DocumentSelectionChanged
    );
  }
}

async function changeFont(eventArgs) {
    await Word.run(async (context) => {
        const doc = context.document;
        const range = doc.getSelection();
        range.font.set({underline: Word.UnderlineType.single});

        await context.sync();
    });
}

期望行为 #

• 光标处新输入文本自动带有下划线（后续改为加粗+下划线）
• 已有文本格式保持不变

实际行为 #

• 新输入文本无格式效果，不符合预期
• 已有文本格式未改变，符合预期

ScriptLab测试代码 #

HTML部分 #

<div>
  <input type="checkbox" id="underline-toggle-chkbox"/><label>underline</label>
</div>

Script部分 #

$('#underline-toggle-chkbox').on('click', () => tryCatch(changeUnderlineToggle));

async function tryCatch(callback) {
  try {
    await callback();
  } catch (error) {
    console.error(error);
  }
}

async function changeUnderlineToggle() {
  const $chkbox = $("#underline-toggle-chkbox");
  const isChecked = $chkbox.is(":checked");
  const doc = Office.context.document;
  if (isChecked === true) {
    doc.addHandlerAsync(Office.EventType.DocumentSelectionChanged, handleFocusChanged);
  } else {
    doc.removeHandlerAsync(Office.EventType.DocumentSelectionChanged);
  }
  console.log("called changeUnderlineToggle: isChecked = " + isChecked);
}

async function handleFocusChanged(eventArgs) {
  const type = eventArgs.type;

  await Word.run(async (context) => {
    const doc = context.document;
    const range = doc.getSelection();

    // range.insertText("", Word.InsertLocation.start);
    range.font.set({bold:true, underline: Word.UnderlineType.single});
    // range.select(Word.SelectionMode.end);
    await context.sync();    
  });

  console.log("called handleFocusChanged : " + type);
}

ScriptLab测试期望 #

勾选复选框后，点击Word文档，功能区Font组的Bold和Underline按钮激活，后续输入文本自动应用加粗+下划线格式。

问题分析与修改方案 #

核心问题 #

1. 事件绑定错误：第一段代码中onclick = () => chkboxOnClicked未正确调用函数，导致复选框点击无响应。
2. 格式设置方式错误：使用font.set()仅修改当前选区的文本格式，但空选区（光标）的格式设置不会影响后续输入——Word新输入文本继承的是光标位置的默认格式记忆，而非临时设置的空选区格式。
3. SelectionChanged事件的局限性：仅靠该事件触发格式设置，无法保证光标移动后立即生效，且逻辑未覆盖首次勾选的场景。

修改后的代码方案 #

基础版本修正

Office.onReady((info) => {
    if (info.host === Office.HostType.Word) {
      // 修正事件绑定：直接绑定函数，确保点击时执行
      document.getElementById("status-changing-chkbox").onclick = chkboxOnClicked;
    }
});

function chkboxOnClicked() {
  const chkbox = document.getElementById("status-changing-chkbox");
  const doc = Office.context.document;
  if (chkbox.checked === true) {
    doc.addHandlerAsync(Office.EventType.DocumentSelectionChanged, setInputFormat);
    // 首次勾选时立即对当前光标应用格式设置
    setInputFormat();
  } else {
    doc.removeHandlerAsync(Office.EventType.DocumentSelectionChanged);
    // 取消勾选时恢复默认格式
    resetInputFormat();
  }
}

async function setInputFormat() {
    await Word.run(async (context) => {
        const range = context.document.getSelection();
        // 关键：用setDefault设置后续输入的默认格式
        range.font.setDefault({
            bold: true,
            underline: Word.UnderlineType.single
        });
        await context.sync();
    });
}

async function resetInputFormat() {
    await Word.run(async (context) => {
        const range = context.document.getSelection();
        // 恢复默认的加粗和下划线状态
        range.font.setDefault({
            bold: false,
            underline: Word.UnderlineType.none
        });
        await context.sync();
    });
}

ScriptLab版本修正

$('#underline-toggle-chkbox').on('click', () => tryCatch(changeUnderlineToggle));

async function tryCatch(callback) {
  try {
    await callback();
  } catch (error) {
    console.error(error);
  }
}

async function changeUnderlineToggle() {
  const $chkbox = $("#underline-toggle-chkbox");
  const isChecked = $chkbox.is(":checked");
  const doc = Office.context.document;
  if (isChecked === true) {
    doc.addHandlerAsync(Office.EventType.DocumentSelectionChanged, setInputFormat);
    // 立即对当前光标应用格式
    await setInputFormat();
  } else {
    doc.removeHandlerAsync(Office.EventType.DocumentSelectionChanged);
    // 恢复默认格式
    await resetInputFormat();
  }
  console.log("called changeUnderlineToggle: isChecked = " + isChecked);
}

async function setInputFormat() {
  await Word.run(async (context) => {
    const range = context.document.getSelection();
    // 设置后续输入的默认格式
    range.font.setDefault({
        bold: true,
        underline: Word.UnderlineType.single
    });
    await context.sync();    
  });
}

async function resetInputFormat() {
  await Word.run(async (context) => {
    const range = context.document.getSelection();
    range.font.setDefault({
        bold: false,
        underline: Word.UnderlineType.none
    });
    await context.sync();    
  });
}

关键说明 #

• font.setDefault() vs font.set()：前者专门用于设置后续输入文本的默认格式，完全满足“新输入文本自动应用格式、不修改已有文本”的需求；后者仅修改当前选中的文本。
• 修正事件绑定：确保复选框点击时正确触发逻辑。
• 即时生效逻辑：勾选/取消时立即执行格式设置，无需用户额外点击文档。

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