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> 。