OneNote Add in: Getting HTML content

Question

In the example, code is provided to get RichText. It is able to get the plain text content of the page, but I cannot seem to get it to return the HTML formatted content of the page.

For example:

Header:

• A
• B

should be:

<p>Header:</p>
<ul>
  <li>A</li>
  <li>B</li>
</ul>

However, the example code uses richText/text and only returns Header:. Is it possible to do something like richText/HTML and get the HTML shown above? (Note: I want to use the add-in only, not the OneNote REST API.)

Thanks!

Code snippet from documentation:

OneNote.run(function (context) {

// Get the collection of pageContent items from the page.
var pageContents = context.application.getActivePage().contents;

// Get the first PageContent on the page, and then get its outline's paragraphs.
var outlinePageContents = [];
var paragraphs = [];
var richTextParagraphs = [];
// Queue a command to load the id and type of each page content in the outline.
pageContents.load("id,type");

// Run the queued commands, and return a promise to indicate task completion.
return context.sync()
    .then(function () {
        // Load all page contents of type Outline
        $.each(pageContents.items, function(index, pageContent) {
            if(pageContent.type == 'Outline')
            {
                pageContent.load('outline,outline/paragraphs,outline/paragraphs/type');
                outlinePageContents.push(pageContent);
            }
        });
        return context.sync();
    })
    .then(function () {
        // Load all rich text paragraphs across outlines
        $.each(outlinePageContents, function(index, outlinePageContent) {
            var outline = outlinePageContent.outline;
            paragraphs = paragraphs.concat(outline.paragraphs.items);
        });
        $.each(paragraphs, function(index, paragraph) {
            if(paragraph.type == 'RichText')
            {
                richTextParagraphs.push(paragraph);
                paragraph.load("id,richText/text");
            }
        });
        return context.sync();
    })
    .then(function () {
        // Display all rich text paragraphs to the console
        $.each(richTextParagraphs, function(index, richTextParagraph) {
            var richText = richTextParagraph.richText;
            console.log("Paragraph found with richtext content : " + richText.text + " and richtext id : " + richText.id);
        });
        return context.sync();
    });
})
.catch(function(error) {
    console.log("Error: " + error);
    if (error instanceof OfficeExtension.Error) {
        console.log("Debug info: " + JSON.stringify(error.debugInfo));
    }
}); 

Answer 1

We haven't documented it yet (it will added very soon), but there is a "getHtml()" method on the richText object. Here is a sample snippet.

OneNote.run(function (context) {

    var outline = context.application.getActiveOutlineOrNull();

    outline.load('id, type, paragraphs/id, paragraphs/type');

    return context.sync().then(function () {
        if (!outline.isNull) {
            var richTextParagraphs = [];
            var htmls = [];
            console.log("outline id: " + outline.id);
            for(var i = 0;  i < outline.paragraphs.items.length; i++){
                var paragraph = outline.paragraphs.items[i];
                console.log("paragraph type " + paragraph.type);
                if (paragraph.type == "RichText"){
                    richTextParagraphs.push(paragraph);
                    var html = paragraph.richText.getHtml();
                    htmls.push(html);
                    paragraph.load("richtext/id, richtext/languageid")
                }
            }

            return context.sync().then(function(){
                for(var i = 0; i < richTextParagraphs.length; i++){
                    var richTextParagraph = richTextParagraphs[i];
                    console.log("Rich text paragraph id: " + richTextParagraph.richText.Id + " and " + richTextParagraph.richText.languageId)
                }
                for(var i = 0; i < htmls.length; i++){
                    var html = htmls[i];
                    console.log("Rich text paragraph html: " + html.value)
                }
            });
        }
    });
})
.catch(function(error) {
    console.log("Error: " + error);
    if (error instanceof OfficeExtension.Error) {
        console.log("Debug info: " + JSON.stringify(error.debugInfo));
    }
});