web-dev-qa-db-fra.com

sweet-alert afficher le code HTML dans le texte

J'utilise un plugin sweet-alert pour afficher une alerte. Avec une configuration classique (par défaut), tout se passe bien. Mais lorsque je veux ajouter une balise HTML dans le texte, celle-ci affiche <b>...</b> sans la mettre en gras. Après avoir cherché la réponse, il semble que je n'ai pas le bon mot de recherche ...

Comment faire en sorte que sweet alert affiche le texte également avec du code HTML?

var hh = "<b>test</b>";
swal({
    title: "" + txt + "", 
    text: "Testno  sporocilo za objekt " + hh + "",  
    confirmButtonText: "V redu", 
    allowOutsideClick: "true" 
});
javascriptsweetalert
44
pbalazek

Le référentiel SweetAlert ne semble pas être maintenu. Il y a un tas de demandes d'extraction sans réponse, la dernière demande d'extraction fusionnée date du 9 novembre 2014.

J'ai créé SweetAlert2 avec le support HTML en mode modal et quelques autres options de personnalisation de la fenêtre modale - largeur, remplissage, comportement du bouton Échap, etc.

Swal.fire({
  title: "<i>Title</i>", 
  html: "Testno  sporocilo za objekt: <b>test</b>",  
  confirmButtonText: "V <u>redu</u>", 
});
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
153
Limon Monte

Une fonctionnalité autorisant le HTML pour les paramètres de titre et de texte a été ajoutée avec une fusion récente dans la branche principale sur GitHub https://github.com/t4t5/sweetalert/commit/9c3bcc5cb75e598d6faaa37353ecd84937770f3d

Utilisez simplement la configuration JSON et définissez 'html' sur true, par exemple:

swal({ html:true, title:'<i>TITLE</i>', text:'<b>TEXT</b>'});

Cela a été fusionné il y a moins d'une semaine et est mentionné dans le fichier README.md (html est défini sur false dans l'un des exemples, bien que cela ne soit pas explicitement décrit), mais il n'est pas encore documenté sur la page marketing http://tristanedwards.me/sweetalert

57
jitmo

J'étais en train de passer de sweetalert à l'ancienne et j'ai découvert comment procéder dans la nouvelle version ( document officiel ):

// this is a Node object    
var span = document.createElement("span");
span.innerHTML = "Testno  sporocilo za objekt <b>test</b>";

swal({
    title: "" + txt + "", 
    content: span,
    confirmButtonText: "V redu", 
    allowOutsideClick: "true" 
});
21
Vyctorya

À compter de 2018, la réponse acceptée n'est plus à jour:

Sweetalert est maintenu et vous pouvez résoudre le problème de la question d'origine en utilisant l'option content .

7
GavinR

Sweet alerts a également une option 'html', définissez-la sur true.

var hh = "<b>test</b>";
swal({
    title: "" + txt + "", 
    html: true,
    text: "Testno  sporocilo za objekt " + hh + "",  
    confirmButtonText: "V redu", 
    allowOutsideClick: "true" 
});
5
Michael McHaney

J'ai juste eu du mal avec ça. Je suis passé de sweetalert 1 -> 2. Cette bibliothèque: https://sweetalert.js.org/guides/

L'exemple de la documentation "chaîne" ne fonctionne pas comme prévu. Vous ne pouvez tout simplement pas le dire comme ça.

content: `my es6 string <strong>template</strong>`

Comment je l'ai résolu:

const template = (`my es6 string <strong'>${variable}</strong>`);
content: {
      element: 'p',
      attributes: {
        innerHTML: `${template}`,
      },
    }

Il n'y a pas de documentation sur la manière de procéder, il s'agissait simplement d'essais et d'erreurs, mais au moins, cela semble fonctionner.

3
Shnigi

Utilisez le paramètre html de SweetAlert.

Vous pouvez définir la sortie HTML directement sur cette option:

var hh = "<b>test</b>";
swal({
    title: "" + txt + "", 
    html: "Testno  sporocilo za objekt " + hh + "",  
    confirmButtonText: "V redu", 
    allowOutsideClick: "true" 
});

Ou

swal({
    title: "" + txt + "", 
    html: "Testno  sporocilo za objekt <b>teste</b>",  
    confirmButtonText: "V redu", 
    allowOutsideClick: "true" 
});
0
Silvio Delgado