Word Office.js 中 InsertHtml 的字体错误

Question

当我通过正确的方法insertHtml 在 Word 文档中插入 HTML 时，p 标签中包含的所有 html 内容都变为“Times New Roman”；其余的是“Calibri”，这是文档的默认字体。 例如，<div>Hello</div> 在 Calibri 中将是 Hello； <p>Hello</p> 将在 Times New Roman 的 Hello 中。 除了插入的 html 的最后一段，它将始终在 Calibri 中。

我尝试做context.document.getSelection().insertHtml(myHtml, "replace")，尝试将其插入内容控件并设置myContentControl.styleBuiltIn = 'Normal' 或myContentControl.font.name = 'Calibri'，但它并没有改变任何事情！

有人有想法吗？

谢谢！

为辛迪编辑 Html 去 Times New Roman ;不涉及 CSS，只有纯 HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus varius erat, at vulputate elit lacinia et. Nullam mattis vitae nunc eget ultrices. Cras massa lacus, vulputate id tristique quis, iaculis a leo. Ut iaculis est nunc, vitae venenatis turpis lacinia nec. Donec auctor elementum augue id accumsan. Etiam vehicula orci orci, in sollicitudin nunc lobortis in. Etiam id mauris rhoncus, varius ligula quis, faucibus dolor. Vestibulum gravida metus sit amet imperdiet consequat. Integer vehicula malesuada nisi sit amet imperdiet. In tristique vulputate massa, eu mattis massa dictum ac. Suspendisse non sem at mi fermentum pretium. Etiam tincidunt augue ut justo pretium, eu auctor velit blandit. Etiam massa leo, lacinia vel facilisis nec, mattis quis enim.</p>

<p>Donec elementum nulla et neque maximus volutpat. Pellentesque scelerisque aliquam velit, et tincidunt neque feugiat nec. Etiam euismod arcu sit amet turpis eleifend commodo. Donec consectetur erat at rhoncus semper. Suspendisse vel dui sollicitudin, condimentum eros sed, malesuada augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin finibus, orci feugiat ullamcorper aliquam, magna enim molestie libero, vel maximus diam elit non sem. Donec et molestie arcu, non commodo nisl.</p>

<p>Nunc placerat a metus mattis fringilla. Pellentesque ac mattis nisl. Aliquam sit amet maximus nulla. Ut leo erat, efficitur eget dapibus a, maximus sed nisi. Proin lacinia efficitur ex vel congue. Fusce quis ullamcorper mauris. Duis eu nunc pellentesque, egestas tellus eu, auctor lacus. Suspendisse pellentesque nunc nisi, id condimentum felis pretium a. Integer eu nulla pharetra, ullamcorper nulla in, faucibus turpis.</p>

编辑和注意：为了完全透明，我通过执行以下操作将内容控件的样式设置为“正常”。但是我仍然想了解为什么会发生这种 Times New Roman 的事情，以及是否有比这更清洁的方法：

var thisDocument = context.document,
            range = thisDocument.getSelection(),
            contentControl = range.insertContentControl();
        contentControl.insertHtml(element, Word.InsertLocation.start);
        return context.sync().then(function () {
            contentControl.styleBuiltIn = 'Normal';
            return context.sync();
        });

Answer 1

好的，对于那些碰巧在这里结束的人，这是我的测试结果。

添加内容控件并将其 styleBuiltIn 设置为正常可以正确设置我的内部 html。我的意思是这样：

var thisDocument = context.document,
        range = thisDocument.getSelection(),
        contentControl = range.insertContentControl();
    contentControl.insertHtml(element, Word.InsertLocation.start);
    return context.sync().then(function () {
        contentControl.styleBuiltIn = 'Normal';
        return context.sync();
    });

设置段落的字体不起作用。我查看了 XML 表示文件，发现了 Rick 所说的内容。我所有的<p> 标签都自动嵌套在<w:p> 标签中，例如：

<w:p w:rsidR="00FC6339" w:rsidRDefault="00FC6339">
  <w:pPr>
    <w:pStyle w:val="NormalWeb"/>
    <w:divId w:val="342317998"/>
  </w:pPr>
  <w:r>
    <w:t xml:space="preserve">My awesome text</w:t>
  </w:r>
</w:p>

这里的关键是<w:pStyle>标签，它设置了一个内置样式，定义如下：

<w:style w:type="paragraph" w:styleId="NormalWeb">
<w:name w:val="Normal (Web)"/>
<w:basedOn w:val="Normal"/>
<w:uiPriority w:val="99"/>
<w:semiHidden/>
<w:unhideWhenUsed/>
<w:rsid w:val="006D08D1"/>
<w:pPr>
  <w:spacing w:before="100" w:beforeAutospacing="1" w:after="100" w:afterAutospacing="1" w:line="240" w:lineRule="auto"/>
</w:pPr>
<w:rPr>
  <w:rFonts w:ascii="Times New Roman" w:eastAsiaTheme="minorEastAsia" w:hAnsi="Times New Roman" w:cs="Times New Roman"/>
  <w:sz w:val="24"/>
  <w:szCs w:val="24"/>
  <w:lang w:eastAsia="fr-FR"/>
</w:rPr>

这里可以看到字体是Times New Roman，大小为24（也就是12pt）。

我不打算进入“修改文档加载时的内置样式”字段，所以我最终选择了 Rick 解决方案，即：

 Word.run(function (context) {
        var thisDocument = context.document,
            range = thisDocument.getSelection(),
            paragraph = range.insertParagraph("", Word.InsertLocation.after),
            //Getting range "start" because, if user selection contains different fonts, font will be null
            _range = range.getRange("start"),
            rangeFontName,
            rangeFontSizePx,
            rangeFontColor;
        _range.load('font');
        return context.sync().then(function () {
            rangeFontName = _range.font.name;
            //Font size returned by the doc is in pt -> convert to px
            rangeFontSizePx = (96 / 72 * _range.font.size) + "px";
            rangeFontColor = _range.font.color;

            //Setting style inline
            element.find('p').css({
               'font-family': rangeFontName,
               'font-size': rangeFontSizePx,
               'color': rangeFontColor
            });
            paragraph.insertHtml(element.html(), Word.InsertLocation.replace);
            });
            return context.sync()
        });
    });

然后……明白了！现在，我插入的 html 中的 <p> 标记具有与 Word 文档中插入符号/选择项相同的基本字体参数。

Answer 2

这是设计使然。所有<p> 都应该获得浏览器的默认样式，除非它们具有覆盖它的style 属性。尝试将style="font-family:calibri" 添加到您想要成为 Calibri 的段落中。错误是最后一段忽略了style 属性（以及浏览器的默认样式）。解决方法是在最后一段之后添加<br> 或<p></p>。