How do I get the formatting the Current cell of the table in Word using office.js

Question

I had asked a question about How to get the formatting of a Cell using Office.js in excel. and I have the same question again but this time about ms-word it is possible that i can get the formatted text which is there in table cell created in word application.

Though I am able to get the selected text as html which gives me the styles i needed

 Office.context.document.getSelectedDataAsync(Office.CoercionType.Html,
        function (result) {
            if (result.status === Office.AsyncResultStatus.Succeeded) {
                showNotification('The selected text is:', '"' + result.value + '"');
            } else {
                showNotification('Error:', result.error.message);
            }
        });

I just want the current cell formatted text Thank you!

Answer 1

Excellent question Pradeep. In order to get the cell formatting you need to use the currently-in-preview Word 1.3 APIs. You can see how to try the 1.3 Apis here. (Note you need to use the preview Office.js CDN disclosed on that page!) Check all of what's new here.

Now, once you are ready to try 1.3, the following code will give you the cell formatting information. in general what the code is doing is

1. Verifies if the selection is within a cell in a table.
2. Once that verification is done, we get the 'body' of the cell. Body objects contain the FONT object which will include all the formatting properties you need.(ie. color, font name, bold, italic etc. You can also get the HTML of the body using the getHtml() function.

Find below the code to do that. Please note that this code will return you the format that is applied in the whole cell. if you want to go next level, which is to go word by word to get the formatting info, then you need to apply the split method on the body object, so you can then traverse and get the formatting info of each of the returned ranges. Hope this is helpful! Happy coding!!

function getFormattedText() {

        Word.run(function (context) {
            //step 1: lets get the selection's range. and find out if its within a table cell.....
            var mySelection = context.document.getSelection().parentTableCell;
            context.load(mySelection);
            return context.sync()
            .then(function () {
                if (mySelection.isNull == true) {
                    //selection is not within a cell..... 
                    console.log("selection not in a header");


                }
                else {

                    // the selection is inside a cell! lets get the content....
                    var body = mySelection.body;
                    context.load(body, { expand: 'font' });
                    return context.sync()
                    .then(function () {
                        console.log(body.font.name + " " + body.font.color);  // at this point all the font properties are available, bold, italic color.. etc...

                    })
                      .catch(function (e) {

                         console.log(e.message);
                      });
                   
                }
            })
            .catch(function (e) {

               console.log(e.message);
            });

        });
    }