Comment préparer du contenu HTML pour un Lecteur immersif

Cet article explique comment structurer votre code HTML et en récupérer le contenu afin qu’il puisse être utilisé par votre application Immersive Reader.

Préparer le contenu HTML

Placez le contenu que vous souhaitez afficher dans le Lecteur immersif à l’intérieur d’un élément conteneur. Assurez-vous que l’élément conteneur a un id unique. Pour en savoir plus sur la façon dont Immersive Reader prend en charge les éléments HTML de base, consultez la documentation de référence du kit de développement logiciel (SDK).

<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>

Recevoir le contenu HTML dans JavaScript

Utilisez l’id de l’élément conteneur pour récupérer le contenu HTML dans votre code JavaScript.

const htmlContent = document.getElementById('immersive-reader-content').innerHTML;

Lancer le Lecteur immersif avec votre contenu HTML

Lors de l’appel de ImmersiveReader.launchAsync, définissez la propriété mimeType du bloc sur text/html pour activer l’affichage HTML.

const data = {
    chunks: [{
        content: htmlContent,
        mimeType: 'text/html'
    }]
};

ImmersiveReader.launchAsync(YOUR_TOKEN, YOUR_SUBDOMAIN, data, YOUR_OPTIONS);

Étape suivante