'HTML in OneNote Add-in API

I've created my own OneNote Add-in using Nodejs. I am having two issues. I've searched high and low and haven't found a solution.

My add-in adds a new outline to a OneNote page. This outline contains an HTML table with one column and multiple rows. I want set the background of some of the HTML table rows. I have tried everything I could think of, including:

  • Setting the bgcolor attribute of TR: <tr bgcolor='red'>
  • Setting the bgcolor attribute of TD: <td bgcolor='red'>
  • Setting the style attribute of TR: <tr style='background-color:red'>
  • Setting the style attribute of TD: <td style='background-color:red'>
  • Using a separate CSS file
  • Using the Hex value for the color (red) #FF0000
  • Exporting a OneNote 2016 page as "Single File Web Page (*.mht)", inspecting the contents and trying to replicate that myself.
  • Tried to view source on the OneNote web version of my page to inspect a table row that has the background color set. (The page content is buried in so many layers, I can't find the content page source).
  • I tried to figure out how to programmatically add HTML content to the page, but Microsoft's OneNote API doesn't specify how to insert a table.

Noting works. Additionally, I want one of the cells in my table to use &nbsp and not strip out extra white space. &nbsp doesn't work. Neither <pre> tag. OneNote just ignores my markup, except I was able to specify the thickness of the table border <table border=1>.

For reference, I cannabalized this sample code: Build your first OneNote task pane add-in

I used the above sample code to create this: taskpane.js in my Github repo

htmlcssnode.jsoffice-jsoffice-addins


Solution 1:[1]

To answer my own question...

I found this after posting the question:
OneNote API HTML tag support

It doesn't appear that Microsoft supports bgcolor, background CSS on tables/tr/td, nor CSS in general with respect to the OneNote API. The <pre> tag and &nbsp is not even listed.

Solution 2:[2]

Good morning,

I know that this is an old post relatively but I couldn't see many others asking the same question and I've just found a solution.

Essentially you can do normal inline styling but you need to use the backslash for the quotes inside the "var html =..." line.

For example.

var html = "<p style=\"color: blue;font-family:Courier;text-align:center;background-color:yellow;\"> This paragraph shows blue, Courier text</p><table><tr><td style=\"background-color: #D6EEEE;\">A light blue coloured table cell</td></tr></table>"

Hopefully I can now find a way to change the whole page colour programatically...

Chris

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Steve3p0
Solution 2 Chris Andrews

Related Questions