Comment récupérer le contenu HTML avec l'éditeur Quill ?

Introduction

En ce moment, Quill est mon éditeur de texte enrichi préféré. La saisie contenur dans l'éditeur Quill est décrite par le format Deltas. Ce format compatible JSON est pratique pour de nombreuses applications. Mais parfois, il est nécessaire de récupérer le contenu HTML pour le publier sur une page web ou l'envoyer par mail.

Cette page explique comment le récupérer en JavaScript et comment le poster dans un formulaire. La description présentée sur cette page a été testée avec la version 1.3.6 de Quill.

Récupérer le HTML

De nombreuses options existent pour récupérer le HTML depuis l'éditeur Quill.

Vous pouvez essayer de convertir le format Delta en JavaScript :

Vous pouvez aussi le parser en PHP sur le serveur (après l'avoir envoyé) avec l'une de ces bibliothèques :

J'ai essayé ces solutions et aucune ne m'a totalement donné satisfaction. J'ai finalement trouvé le moyen le plus simple et le plus efficace sur GitHib :

var html = quill.root.innerHTML;

Le code ci-dessus vous permet de récupérer le HTML brut sans les classes ajoutées par l'éditeur. Le JSFiddle suivant montre le fonctionnement, essayez-le en ligne. Modifiez le contenu de l'édiuteur, le code devrait s'actualiser automatiquement.

Poster le HTML dans un formulaire

Si vous avez besoin d'envoyer le contenu au format HTML dans un formulaire, je vous suggère de créer un champ caché dans le formulaire et d'y copier le code HTML au moment de la soumission du formulaire :

<input type="hidden" name="quill-html" id="quill-html">

Lorsque le bouton de soumission est cliqué, copier le code HTML dans le champ caché :

// When the submit button is clicked, update output
$('#btn-submit').on('click', () => { 
    // Get HTML content
    var html = quill.root.innerHTML;

    // Copy HTML content in hidden form
    $('#quill-html').val( html )

    // Post form
    myForm.submit();
})

Si vous stoquez le contenu du formulaire dans une base de données, je vous recommande d'y copier également le contenu au format Delta pour conserver la compatibilité avec l'éditeur QUill.

Voir aussi

Dernière mise à jour : 17/10/2021