CODEWITHSUNDEEP
office-js
Marius Conjeaud
Marius Conjeaud

Reputation: 149

Wrong font for InsertHtml in Word Office.js

When I insert HTML in a Word document throught the proper method insertHtml, all my html content contained in a p tag goes 'Times New Roman' ; the rest goes 'Calibri', which is the document's default font. For instance, <div>Hello</div> will be Hello in Calibri ; <p>Hello</p> will be in Hello in Times New Roman. Except the last paragraph of the inserted html, which will always be in Calibri.

I tried to do context.document.getSelection().insertHtml(myHtml, "replace"), tried to insert it in a content control and set myContentControl.styleBuiltIn = 'Normal' or myContentControl.font.name = 'Calibri' but it doesn't change a thing !

Does anyone have an idea ?

Thanks !

Edit for Cindy Html going Times New Roman ; No CSS involved, just plain 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>

Edit and NB : To be completely transparent, I managed to set the content control's style to 'Normal' by doing the following. But I still want to understand why this Times New Roman thingy is happening, and if there is a cleaner way than this :

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();
        });

Upvotes: 2

Views: 712

Answers (2)

Marius Conjeaud
Marius Conjeaud

Reputation: 149

Ok, for those who happen to end up here, here are the results of my testing.

Adding a content control and setting its styleBuiltIn to normal properly sets my inner html's. I mean like so :

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();
    });

Setting the paragraph's font does not work. I went to look into the XML representing file, and I found what Rick was talking about. All my <p> tags are automatically nested in a <w:p> tag, for instance : 

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

The key here is the <w:pStyle> tag, which sets a built-in style, defined like so :

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

You can see here that the font is Times New Roman, with a size of 24 (which is, 12pt).

I'm not going to go into the "modify the built-in style at document load"-field, so I ended up with Rick solution, that is :

 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()
        });
    });

And... got it ! Now the <p> tags inside my inserted html have the same basic font parameters as the ones where the caret / selection is in the Word doc.

Upvotes: 2

Rick Kirkham
Rick Kirkham

Reputation: 9674

This is by design. All the <p> should get the default styling of the browser unless they have a style attribute that overrides it. Try adding style="font-family:calibri" to the paragraphs that you want to be Calibri. The bug is that the last paragraph ignores the style attribute (and the browser's default styling). The workaround is to add a <br> or <p></p> after the last paragraph.

Upvotes: 1

Related Questions