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

What are the properties available on the `richTextParagraph.richText` object? Is there an html one among them? If so, what is its return type? — Michael Zlatkovsky - Microsoft, Nov 23 '16 at 23:59
Properties are `id` and `text` only (both of type `String`). Per https://dev.office.com/reference/add-ins/onenote/richtext — Diode Dan, Nov 24 '16 at 00:05

Jorge Aguirre · Accepted Answer · 2016-11-28T18:32:44.337

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

Note this isn't full page HTML, only at the rich text level. The function above also doesn't take into account all rich text objects, there might be more in the page (inside tables, in sub paragraphs...) — Jorge Aguirre, Nov 24 '16 at 00:22
Jorge, thanks for the quick reply. The code above is throwing my a syntax error warning in Chrome. I figured it might be a copy and paste problem, so I wrote it out by hand, but then I got the error: `Error: ValueNotLoaded: The value of the result object has not been loaded yet. Before reading the value property, call "context.sync()" on the associated request context.` Could you please clarify? — Diode Dan, Nov 24 '16 at 22:05
Is it possible to get the HTML from a table object, or do I have to iterate though each cell of the table to get the HTML? — Diode Dan, Jul 04 '17 at 20:21

OneNote Add in: Getting HTML content

1 Answers1

Linked