javascript - Office.js 使用内联 CSS 在 ContentControl 中格式化 HTML

Question

我正在插入这样的内容控件(ScriptLab 示例):

$("#run").click(() => tryCatch(run));

var myHtml = '<div style="padding-left:2em; text-indent:-2em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>';

async function run() {
  await Word.run(async (context) => {
    var range = context.document.getSelection();
    var cc = range.insertContentControl();
    var ccRange = cc.insertHtml(myHtml, 'Replace');
    await context.sync();
  });
}

async function tryCatch(callback) {
  try {
    await callback();
  }
  catch (error) {
    OfficeHelpers.UI.notify(error);
    OfficeHelpers.Utilities.log(error);
  }
}

Word 中预期的视觉输出是这样的:http://cssdeck.com/labs/ocplq2la (带有悬挂缩进)。然而，内联 css 似乎被忽略了，虽然文本被正确插入到内容控件中，但没有像链接示例中那样的悬挂缩进。

通过 Office.js 实现这种样式的正确方法是什么？有可能吗？

Answer 1

传递给 insertHtml() 的标记样式存在一个已知错误。您通常可以通过在末尾包含另一个相同类型的元素来解决它。请尝试包括 <div></div>在标记的末尾。