Edit

Work with OneNote page content

  • Article

In the OneNote add-ins JavaScript API, page content is represented by the following object model.

OneNote page object model diagram.

  • A Page object contains a collection of PageContent objects.
  • A PageContent object contains a content type of Outline, Image, or Other.
  • An Outline object contains a collection of Paragraph objects.
  • A Paragraph object contains a content type of RichText, Image, Table, or Other.

To create an empty OneNote page, use one of the following methods.

Then use methods in the following objects to work with the page content, such as Page.addOutline and Outline.appendHtml.

The content and structure of a OneNote page are represented by HTML. Only a subset of HTML is supported for creating or updating page content, as described below.

Supported HTML

The OneNote add-in JavaScript API supports the following HTML for creating and updating page content.

  • <html>, <body>, <div>, <span>, <br/>
  • <p>
  • <img>
  • <a>
  • <ul>, <ol>, <li>
  • <table>, <tr>, <td>
  • <h1> ... <h6>
  • <b>, <em>, <strong>, <i>, <u>, <del>, <sup>, <sub>, <cite>

Note

Importing HTML into OneNote consolidates whitespace. The resulting content is pasted into one outline.

OneNote does its best to translate HTML into page content while ensuring security for users. HTML and CSS standards do not exactly match OneNote's content model, so there will be differences in appearances, particularly with CSS stylings. We recommend using the JavaScript objects if specific formatting is needed.

Accessing page contents

You are only able to access Page Content via Page#load for the currently active page. To change the active page, invoke navigateToPage($page).

Metadata such as title can still be queried for any page.

See also