Rendre du texte brut au format HTML dans Drupal 8 twig

16

J'ai rencontré un mur essayant de rendre un code de balisage d'image svg en html à partir d'un champ de texte brut.

Je cherche à rendre le code svg à partir d'un champ de texte brut sans remplacer le rendu du champ de texte brut partout ailleurs.

le format de texte brut convertit actuellement toutes les balises html et <> en &lt; &gt;.

J'ai créé un modèle de champ et essayé à la fois de sortir le contenu du champ comme

{{ item.content.context.value }}

et

{{ item.content|raw }}

les deux affichent la valeur sous forme de chaîne enveloppant chaque ligne avec des "guillemets" et convertissant les sauts de ligne en <br/>balises.

J'avais auparavant le texte formaté de type champ, mais qui enveloppait également tout dans les <pre>balises, même lorsque toutes les balises étaient autorisées. J'aimerais vraiment le faire fonctionner avec du texte brut.

Exemple de code svg que le champ doit contenir sous forme de texte:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 290 290" enable-background="new 0 0 290 290" xml:space="preserve">
    <g>
        <path fill="none" stroke="#78C681" stroke-width="3" stroke-miterlimit="10" d="M261.1,273.1H28.9c-6.6,0-12-5.4-12-12V28.9
            c0-6.6,5.4-12,12-12h232.1c6.6,0,12,5.4,12,12v232.1C273.1,267.7,267.7,273.1,261.1,273.1z"/>
        <circle fill="none" stroke="#1B435D" stroke-width="2" stroke-miterlimit="10" cx="145.2" cy="166.9" r="62.7"/>
        <line fill="none" stroke="#78C681" stroke-width="3" stroke-miterlimit="10" x1="16.9" y1="60.8" x2="273.1" y2="60.8"/>
        <circle fill="none" stroke="#1B435D" stroke-width="2" stroke-miterlimit="10" cx="178.3" cy="152.3" r="6.8"/>
        <path fill="none" stroke="#1B435D" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M115.1,167.9
            c8.8,0,22.3,3.2,28.4,4.7"/>
        <path fill="none" stroke="#1B435D" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M151.9,216.9
            c0,0,17.2-1.5,29.6-14.8"/>
    </g>
</svg>

J'espère que quelqu'un pourra vous aider.

Meilleur,

Alari

8 theming Alari Truuts
la source
Le texte brut prêt à l'emploi a un filtre qui échappe au balisage. |rawn'échappe pas au balisage déjà échappé. La fuite se produit plus tôt que la fuite automatique de Twig.
Cottser

Réponses:

17

Une solution iworkyon de la communauté Drupal:

champ - nœud - [nom du champ] .html.twig:

{% if svg %}
  <div class="my-svg">
    {{ svg|raw }}
  </div>
{% endif %}

THEME.info:

/**
* Implements hook_preprocess_field().
*/
function MYTHEME_preprocess_field(&$variables, $hook) {
    switch ($variables['element']['#field_name']) {
      case 'field_svg_test':
        $variables['svg'] = $variables['items'][0]['content']['#context']['value'];
        break;
    }
}
Alari Truuts
la source
Hehe, on dirait que mon surnom IRC "Je suis au travail" s'est glissé ici: D Découverte amusante pendant la recherche sur Google!
ividyon
J'espère que cela ne vous dérange pas :) Cela m'a aidé, alors j'ai pensé partager.
Alari Truuts
7

Avez-vous essayé d'appliquer le filtre brut sur la valeur?

{{ item.content.context.value|raw }}

Mais ce n'est pas sûr. Pour sortir des fichiers, vous pouvez utiliser un champ de fichier. Cela a les bons formateurs de champ pour générer le lien. Si vous n'êtes pas en mesure de configurer le lien dans l'interface utilisateur selon vos besoins, vous pouvez modifier la brindille ou le prétraitement pour ce champ spécifique.

4k4
la source
rawest / a été supprimé: drupal.org/node/2603074
Clive
4k4: Le champ est un champ de texte brut et non un fichier. La valeur du champ sera le balisage copié d'une image svg. J'ai essayé votre solution, mais rien n'est différent, obtenez toujours le problème de guillemets et de sauts de ligne. De plus, maintenant, je suis inquiet d'utiliser | raw après ce que Clive a dit et je suis encore plus loin d'arriver à une solution.
Alari Truuts
Vous êtes encore plus loin d'arriver à une solution, car vous essayez de tromper l'échappement automatique et drupal essaie tout pour vous décourager de le faire. Mieux vaut utiliser le mécanisme qui existe pour fournir des liens de fichiers comme décrit dans ma réponse. Et puis utilisez les modèles de brindilles appropriés en bas de la ligne pour modifier le rendu.
4k4
4k4: Je suis un peu confus maintenant, car le contenu que le champ doit contenir n'est pas un fichier. c'est sous forme de code texte / svg. J'ai mis à jour la question avec un exemple.
Alari Truuts
Le texte brut ne pourra pas sortir ce code svg. Avez-vous essayé le format de texte "Full Html", si cela peut traiter le code svg? Sinon, vous feriez mieux de mettre le svg dans son propre fichier svg.
4k4
6

Cela a fonctionné pour moi:

{{ item.content['#context'].value|raw }}
Janey
la source