How to prepare HTML content for Immersive Reader
This article shows you how to structure your HTML and retrieve the content, so that your Immersive Reader application can use it.
Prepare the HTML content
Place the content that you want to render in the Immersive Reader inside of a container element. Be sure that the container element has a unique id
. To learn more about how the Immersive Reader provides support for basic HTML elements, see the SDK reference.
<div id='immersive-reader-content'>
<b>Bold</b>
<i>Italic</i>
<u>Underline</u>
<strike>Strikethrough</strike>
<code>Code</code>
<sup>Superscript</sup>
<sub>Subscript</sub>
<ul><li>Unordered lists</li></ul>
<ol><li>Ordered lists</li></ol>
</div>
Get the HTML content in JavaScript
Use the id
of the container element to get the HTML content in your JavaScript code.
const htmlContent = document.getElementById('immersive-reader-content').innerHTML;
Launch the Immersive Reader with your HTML content
When calling ImmersiveReader.launchAsync
, set the chunk's mimeType
property to text/html
to enable rendering HTML.
const data = {
chunks: [{
content: htmlContent,
mimeType: 'text/html'
}]
};
ImmersiveReader.launchAsync(YOUR_TOKEN, YOUR_SUBDOMAIN, data, YOUR_OPTIONS);
Next step
Feedback
https://aka.ms/ContentUserFeedback.
Kommer snart: I hele 2024 udfaser vi GitHub-problemer som feedbackmekanisme for indhold og erstatter det med et nyt feedbacksystem. Du kan få flere oplysninger under:Indsend og få vist feedback om