Balises HTML dans la traduction i18next
J'utilise i18next pour alimenter i18n pour mon blog. Cela fonctionne très bien sur le contenu texte uniquement, mais quand j'essaie de traduire du contenu qui inclut un balisage HTML, il affiche le balisage brut lorsque je traduis le texte.
À titre d'exemple, voici un extrait du balisage d'un post qui ne fonctionne pas comme prévu:
<div class="i18n" data-i18n="content.body">
In Medellín they have many different types of <i>jugos naturales</i> (fruit juice) ... <br />
<br />
...
</div>
Le code de traduction ressemble à ceci:
var resources = {
"en": ...,
"es": {
"translation": {
"content": {
"body": "En Medellín hay varios tipos diferentes de <i>jugos naturales</i> ... <br /><br /> ... "
}
}
}
}
i18n.init({"resStore": resources}, function( t ) {
$('.i18n').i18n();
});
Lorsque la traduction est rendue, les balises HTML sont échappées texte:
En Medellín hay varios tipos diferentes de <i>jugos naturales</i>...<br /><br />
Comment puis-je obtenir i18next pour modifier le code HTML des éléments traduits?
5 réponses
Pour faire ce travail, vous devez préfixer le data-i18n attribut des éléments que vous souhaitez traduire avec [html]:
<div class="i18n" data-i18n="[html]content.body">
Source: i18next.jquery.js
Vous devez désactiver l'échappement:
i18n.t("key", { 'interpolation': {'escapeValue': false} })
i18n.t('key',{dateStr: date, interpolation: {escapeValue: false}})
Fonctionne pour moi si date = '15/10/2020', les barres obliques sont également conservées
Indice 3: Échappement:
// given resources { 'en-US': { translation: { key1: Not escaped __nameHTML__, key2: Escaped __name__ } } }; i18n.t("key2", { name: '', escapeInterpolation: true }); // -> Escaped <tag> i18n.t("key1", { name: '', escapeInterpolation: false }); // -> Not escaped <tag>L'ajout du suffixe 'HTML__' à votre valeur empêchera l'échappement même si l'option est définie ainsi.
Vous pouvez activer l'échappement sur init
i18n.init({escapeInterpolation: true});ou en passant l'option à la fonction t comme dans l'exemple.
Pour quiconque essaie de le faire dans Réagir (par exemple avec react-i18-next), sachez que Réagir aussi échappe à la chaîne! Nous devons donc dire à la fois i18n et réagir pour sauter s'échapper.
Pour dire à Réagir pour ne pas échapper à la chaîne, nous devons Réagir est moche dangerouslySetInnerHTML attribut:
<div dangerouslySetInnerHTML={{__html: t('foo', {interpolation: {escapeValue: false}})}} />
Désolé pour ça!