通过 Graph API 处理 OneNote 页面内容答案

【问题标题】：Working with OneNote Page Content via the Graph API通过 Graph API 处理 OneNote 页面内容
【发布时间】：2018-09-27 17:13:02
【问题描述】：

我在通过图形 API 使用 OneNote 时遇到了一些问题。

我知道 OneNote 使用的不是直接的 html，他们需要为 API 来回转换它......但这似乎不是那么复杂的任务。

我正在处理内容中的标签，需要能够更新标签元素。没关系，除了我有一个项目列表（p 或 li）标签的地方有缩进。

更新

如果我的onenote中有这样的项目

无权嵌入图片...所以这里是链接 https://xomq6w.ch.files.1drv.com/y4mc-mJZRhkI5c_fvOAbHGOnzEKVNKgxTHLop-OHfNofncLcC2gUc_Z_aYi0sgrc3hxIxxWpnvwRFc7p-reL5mX8J5pp1ePaY0V2McibdocMTplud7lxcso0EwAGJpHpBkcyLbcsLxDUpoYZ9T5XgCCxxmfUwQhHFPFQdFscfQoDPp7ZA-vCNbErgqyz0FK7prVaeMjs8LpiftMKu6-Xcv7Rg?width=160&height=541&cropmode=none

我通过graph api explorer点击了graph api来获取以下url的内容

GET - https://graph.microsoft.com/beta/users/myname/onenote/pages/0-c9861926a1e8080518ca3750afa63800!1-2B303C571455A20B!102505/content?includeIDs=true

返回的 html 会是这个样子（注意没有缩进）

<body data-absolute-enabled="true" style="font-family:Calibri;font-size:11pt">
    <div id="div:{f115c5ea-0481-0f03-31aa-07b94321c323}{65}" style="position:absolute;left:264px;top:139px;width:624px">
        <p id="p:{f115c5ea-0481-0f03-31aa-07b94321c323}{67}" data-tag="to-do" style="margin-top:0pt;margin-bottom:0pt">Item 1</p>
        <p id="p:{f115c5ea-0481-0f03-31aa-07b94321c323}{74}" data-tag="to-do" style="margin-top:0pt;margin-bottom:0pt">Item 2</p>
        <p id="p:{f115c5ea-0481-0f03-31aa-07b94321c323}{71}" data-tag="to-do" style="margin-top:0pt;margin-bottom:0pt">Item 2a</p>
        <p id="p:{f115c5ea-0481-0f03-31aa-07b94321c323}{73}" data-tag="to-do" style="margin-top:0pt;margin-bottom:0pt">Item 2b</p>
        <p id="p:{f115c5ea-0481-0f03-31aa-07b94321c323}{76}" data-tag="to-do" style="margin-top:0pt;margin-bottom:0pt">Item 3</p>
    </div>
</body>

如果我修补具有这样子项的那些以设置 id（将 id 留在那里...将其变成永久数据 id）以供以后更新甚至关闭标签：

PATCH - https://graph.microsoft.com/beta/users/myname/onenote/pages/0-c9861926a1e8080518ca3750afa63800!1-2B303C571455A20B!102505/content?includeIDs=true

[
  {
    'target':'p:{f115c5ea-0481-0f03-31aa-07b94321c323}{74}',
    'action':'replace',
    'content':'<p id="p:{f115c5ea-0481-0f03-31aa-07b94321c323}{74}" data-tag="to-do" style="margin-top:0pt;margin-bottom:0pt">Item 2</p>'
  }
]

将处理更新，然后将内容更新为：

图片在这里：https://kw9psa.ch.files.1drv.com/y4mplcvzocTmhN9DZBpFt4Sic3AOpxe2Ik4r7VX_0Joxs5ay9woTUYZufKSr0ojcfwQckovsJv5__fSrDx1GqWK9cFa2yQ7uFPE8JQOBwPyYn6PQZHDMM4N9JB4IXF4Rs7dIDoqa0XYfjz93qGiI97Ais99l04QxWZyV1Og5eXRguUYlBoNTwXIuzFEbKZfA03mt_ynxXCjbM7CFHYP99_QgQ?width=160&height=134&cropmode=none

<body data-absolute-enabled="true" style="font-family:Calibri;font-size:11pt">
    <div id="div:{f115c5ea-0481-0f03-31aa-07b94321c323}{65}" style="position:absolute;left:264px;top:139px;width:624px">
        <p id="p:{f115c5ea-0481-0f03-31aa-07b94321c323}{67}" data-tag="to-do" style="margin-top:0pt;margin-bottom:0pt">Item 1</p>
        <p id="p:{f115c5ea-0481-0f03-31aa-07b94321c323}{71}" data-tag="to-do" style="margin-top:0pt;margin-bottom:0pt">Item 2a</p>
        <p id="p:{f115c5ea-0481-0f03-31aa-07b94321c323}{73}" data-tag="to-do" style="margin-top:0pt;margin-bottom:0pt">Item 2b</p>
        <p id="p:{78cb2ca5-efec-4e6f-a763-12e9cac6a2b5}{2}" lang="en-US" data-tag="to-do" data-id="p:{f115c5ea-0481-0f03-31aa-07b94321c323}{74}" style="margin-top:0pt;margin-bottom:0pt">Item 2</p>
        <p id="p:{f115c5ea-0481-0f03-31aa-07b94321c323}{76}" data-tag="to-do" style="margin-top:0pt;margin-bottom:0pt">Item 3</p>
    </div>
</body>

嵌套的 ul/ol 项目基本上也是如此……我也尝试替换整个列表而不是单个项目，但是 api 调用错误而没有其他信息。嵌套的项目符号列表似乎也丢失了父项目符号。

我已经尝试将所有项目的所有更新批量化，一次做一个，颠倒顺序。

有趣的是，如果我进行插入，那么文本缩进和顺序会被保留，但没有删除/删除补丁来清除旧文本...例如

[
  {
    'target':'p:{56d579c0-1203-0224-0587-6fe03fb82539}{34}',
    'action':'insert',
    'position':'before',
    'content':'<p data-id="My_own_id" data-tag="to-do" style="margin-top:0pt;margin-bottom:0pt">Item 1</p>'
  },
  {
    'target':'p:{56d579c0-1203-0224-0587-6fe03fb82539}{34}',
    'action':'<tried replace or delete/remove hoping it was undocumented>',
    'content':'<tried blank or just a span>'
  }
]

其他问题包括

表格失去其显示网格线属性
如果我更新页面上的任何文本，没有文本的标签不会返回甚至消失

部分回答

这是非项目符号列表问题的部分答案...感谢 codeye 为我指明了正确的方向。

通过在现有元素之前插入我的元素，它会保留顺序。

[
  {
    'target':'p:{20781e6d-ba99-4fca-9994-622720cad7f8}{249}',
    'action':'insert',
    'position':'before',
    'content':'<p data-id="test" data-tag="to-do" style="margin-top:0pt;margin-bottom:0pt">Item 2</p>'
  }
]

然后使用以下内容删除旧的，它看起来会保留格式。由于它是一个空的 div，OneNote 不会添加该元素。

[
  {
    'target':'p:{20781e6d-ba99-4fca-9994-622720cad7f8}{249}',
    'action':'replace',
    'content':'<div></div>'
  }
]

【问题讨论】：

请在描述中提供您这边的请求端点和请求正文。
我没有看到您描述的行为。您能否将链接或屏幕截图发布到示例页面？
在上面添加了更多细节......以及具体的网址和步骤。
感谢保罗。我想我知道发生了什么。

标签： microsoft-graph-api onenote-api

【解决方案1】：

表格边框的解决方案

使用表时使用border 属性而不是style。

API 会返回一个带有<table style="border:1px solid;border-collapse:collapse">...</table> 边框的表格。使用table.style.border 查找是否有边框（可以是1px 或0px）。要为表格设置边框，请使用border 属性：<table border="1">...</table>。

td 的 border 属性将被忽略。

【讨论】：

刚刚检查过了，它可以工作。感谢您的提示。

【解决方案2】：

对于待办事项列表的具体问题，我可以确认缩进项目向上移动并与正在更新的元素“分离”的问题。
看起来用缩进更新列表的唯一可靠方法是替换整个列表（表上也有类似的限制）。
在您的示例中，所有 5 个段落似乎都需要更新以保持对齐。
如果这不起作用，请尝试替换周围的 div

 [
      {
        'target':'div:{9dfa7be6-2de0-b802-01ae-20c164255f9d}{30}',
        'action':'replace',
        'content':'<div><p data-tag="to-do">Item 1</p>
                   <div><p data-tag="to-do">Item 2</p>
                        <ul>
                           <p data-tag="to-do:completed">Item 2a</p>
                           <p data-tag="to-do:completed">Item 2b</p>
                       </ul>
                   <div><p data-tag="to-do">Item 3</p>
                   <div><p data-tag="to-do">Item 4</p>
                  </div>'
      }    
]

关于如何删除元素，下面应该可以工作

[{
      'target': 'p:{f5837c83-d816-4337-ab6d-a52abde869a6}{13}',
      'action': 'replace',
      'content': '<br/>'
    }]

这在列表中间不起作用，因为您会遇到垂直间隙。

【讨论】：

替换我的示例中的整个列表将删除缩进。用嵌套的 ul 替换 li 将工作到一个点，但是会在 ul 之前插入一个空行。如果我破坏了格式，这两种解决方案对于插件来说似乎都不令人满意。
好的。我最后的想法是尝试替换 div 内容。我会更新我的答案。
感谢您的帮助...但不幸的是，由于我从图形 api 返回的内容没有显示哪些 p 是缩进的...我无法判断何时放置 ul在那里。
不确定是添加新答案还是用部分答案更新问题...但是已经解决了一个问题...感谢 codeye。现在只需要解决项目符号列表问题，我可能会有一个可行的解决方案。
干得好。单个元素没有显示它们的缩进级别是很痛苦的。我将存储删除不需要的元素的技巧。谢谢。