Какой-нибудь умный способ/алгоритм, чтобы найти, что изменилось в структуре html? (React.js API Microsoft OneNote)

Я пишу веб-приложение, которое будет иметь некоторые функции OneNote. Но я столкнулся с некоторой проблемой. Чтобы обновить страницу, API OneNote требует отправить массив изменений в следующем формате:

[
 {
   'target':'#div1',
   'action':'append',
   'position':'before',
   'content':'<img data-id="first-child" src="image-url-or-part-name" />'
},
{
   'target':'#div1',
   'action':'append',
   'content':'<p data-id="last-child">New paragraph appended to the div</p>'
}
]

https://msdn.microsoft.com/en-us/office/office365/howto/onenote-update-page

Итак, если я использую текстовый редактор, такой как react-rte (библиотека npm), как я должен найти свои изменения в таком формате? Должен ли я сам создавать какой-то алгоритм и сравнивать начальный и конечный контент, чтобы узнать, что изменилось?


reactjs rich-text-editor onenote rte
person Jonas    schedule 20.07.2017    source источник
comment
возможно, попробуйте draftjs.org, у которого есть отличные функции для отслеживания изменений.   -  person azium    schedule 20.07.2017

Ответы (1)


arrow_upward
1
arrow_downward

Наивным решением может быть обновление всей страницы с помощью целевого «тела» - в основном:

https://msdn.microsoft.com/en-us/office/office365/howto/onenote-update-page

[
 {
   'target':'body',
   'action':'replace'
   'content':'...'
}
]
person Jorge Aguirre    schedule 20.07.2017
comment
Да, я думал об этом, но еще не пробовал.. Интересно, сработает ли это, хотя спасибо... - person Jonas; 20.07.2017
comment
Я думаю, что должно ;) - person Jorge Aguirre; 21.07.2017
comment
Я пробовал решение. Работает очень случайным образом... Я знаю, довольно сложно использовать их API. Например, если я получаю ответ ‹body› ‹div› какой-то контент ‹/div› ‹div› другой контент div ‹/div› ‹/body› Иногда замена всего тела редактирует только первый div.... Блин, такая головная боль задача... Я также пытался просто выбрать все родительские элементы div (внутри тела) и заменить их индивидуально, но это все равно... иногда это не работает... Хотел бы я найти достойный (РЕАЛЬНЫЙ) пример их Использование API - person Jonas; 21.07.2017