Laravel 5: Afficher HTML avec Blade


283

J'ai une chaîne retournée à l'une de mes vues, comme ceci:

$text = '<p><strong>Lorem</strong> ipsum dolor <img src="images/test.jpg"></p>'

J'essaie de l'afficher avec Blade:

{{$text}}

Cependant, la sortie est une chaîne brute au lieu de HTML rendu. Comment afficher du HTML avec Blade dans Laravel 5?

PS. PHP echo()affiche correctement le HTML.


2
{!! nl2br($post->description) !!}fonctionne pour moi si je n'ai que des espaces et br.
Muhammad Shahzad

Réponses:


652

Vous devez utiliser

{!! $text !!}

La chaîne s'échappera automatiquement lors de l'utilisation {{ $text }}.


5
Voici les documents Laravel qui mentionnent ceci: "Si vous ne voulez pas que vos données soient échappées, vous pouvez utiliser la syntaxe suivante: Hello, {!! $name !!}." laravel.com/docs/5.5/blade#displaying-data
Ryan

1
Je me demande également ce que @Ryan a mentionné. N'est-ce pas un problème de sécurité?
sanders

@sanders Il s'agit très probablement d'un problème de sécurité s'il $textcontient des entrées utilisateur et que vous n'y avez pas échappé correctement. Par exemple, $text = 'Hello <b>'.$_GET['name'].'</b>';est dangereux car $_GET['name']pourrait inclure du HTML, ce qui autoriserait XSS. Vous pourriez le faire $text = 'Hello <b>'.htmlentities($_GET['name']).'</b>';et seriez en sécurité.
Christopher K.

cette dose ne fait pas tout le tour! si j'avais quelque chose comme ça <meta cc="grâce à">et que je veux le montrer en lame, ça ressemblera à ça <meta cc="gr&acirc;ce &agrave;">. Donc la réponse pour moi est @Praveen_Dabral
brahimm



18

Veuillez utiliser

{!! $test !!} 

Uniquement en cas de HTML alors que si vous voulez rendre des données, piquer etc. utilisez

{{ $test }}

En effet, lorsque votre fichier de lame est compilé

{{ $test }}est converti en <?php echo e($test) ?> tout

{!! $test !!} est converti en <?php echo $test ?>


13

Il y a une autre manière. Si le but de l'objet est de rendre du HTML, vous pouvez implémenter un \Illuminate\Contracts\Support\Htmlablecontrat qui a une toHtml()méthode.

Ensuite, vous pouvez rendre cet objet à partir de la lame comme ceci: {{ $someObject }}(remarque, pas besoin de {!! !!}syntaxe).

De plus, si vous souhaitez renvoyer la propriété html et que vous savez que ce sera html, utilisez une \Illuminate\Support\HtmlStringclasse comme celle-ci:

public function getProductDescription()
{
    return new HtmlString($this->description);
}

puis l'utiliser comme {{ $product->getProductDescription() }}.

Bien sûr, soyez responsable lors du rendu direct du code HTML brut sur la page.


11

Essaye ça. Ça a marché pour moi.

{{ html_entity_decode($text) }}

Dans le modèle Laravel Blade, {{}} échappera au HTML. Si vous souhaitez afficher le html du contrôleur en vue, décodez le html de la chaîne.


3
ce n'est pas juste, c'est au-dessus des réponses, cela pourrait être fait à votre façon, cela ne fait que dérouter le porgrammer
Milad

8

Vous pouvez utiliser {!! $ text !!} pour le rendu du code HTML dans Laravel

{!! $text !!}

Si tu utilises

{{ $text }}

Il ne rendra pas le code HTML et ne sera pas imprimé sous forme de chaîne.


5

Utilisez {!! $text !!}pour afficher les données sans y échapper. Assurez-vous simplement que vous ne le faites pas avec des données provenant de l'utilisateur et qui n'ont pas été nettoyées.


5

c'est simple

{!! $text !!}

laravel compile comme un élément dom et {{$text}}imprime comme une chaîne


5

vous pouvez faire de nombreuses façons dans laravel 5 ..

{!! $text !!}

{!! html_entity_decode($text) !!}

si vous stockez des balises codées (& lt; p & gt; hello world. & lt; / p & gt;) dans db ci-dessus, le code fonctionne ... Merci !!!
narasimharaosp

4

Vous pouvez le faire en utilisant trois façons d'utiliser d'abord si la condition comme ci-dessous

{!! $text !!}

C'est la deuxième façon

<td class="nowrap">
@if( $order->status == '0' )
    <button class="btn btn-danger">Inactive</button>
@else
    <button class="btn btn-success">Active</button>
@endif
</td>

La troisième et bonne façon d'utiliser l'opérateur ternaire sur la lame

<td class="nowrap">
      {!! $order->status=='0' ? 
          '<button class="btn btn-danger">Inactive</button> : 
          '<button class="btn btn-success">Active</button> !!}
</td>

J'espère que la troisième voie est parfaite pour l'opérateur ternaire d'occasion sur lame.


4

Pour ajouter des explications supplémentaires, le code à l'intérieur des {{ }}instructions Blade est automatiquement transmis via la htmlspecialchars()fonction fournie par php. Cette fonction prend une chaîne et trouvera tous les caractères réservés que HTML utilise. Les caractères réservés sont & < >et ". Il remplacera ensuite ces caractères réservés par leur variante d'entité HTML. Quels sont les suivants:

|---------------------|------------------|
|      Character      |       Entity     |
|---------------------|------------------|
|          &          |       &amp;      |
|---------------------|------------------|
|          <          |       &lt;       |
|---------------------|------------------|
|          >          |       &gt;       |
|---------------------|------------------|
|          "          |       &quot;     |
|---------------------|------------------|

Par exemple, supposons que nous ayons l'instruction php suivante:

$hello = "<b>Hello</b>";

Passé dans la lame comme {{ $hello }}donnerait la chaîne littérale que vous avez passée:

<b>Hello</b>

Sous le capot, cela résonnerait &lt;b&gt;Hello&lt;b&gt

Si nous voulions contourner cela et le rendre réellement en tant que balise en gras, nous échappons à la htmlspecialchars()fonction en ajoutant le panneau de syntaxe d'échappement:

{!! $hello !!}

Notez que nous n'utilisons qu'une seule accolade.

La sortie de ce qui précède donnerait:

Bonjour

Nous pourrions également utiliser une autre fonction pratique fournie par php, qui est la html_entity_decode()fonction. Cela convertira les entités HTML en leurs caractères HTML respectés. Considérez-le comme l'inverse dehtmlspecialchars()

Par exemple, disons que nous avons l'instruction php suivante:

$hello = "&lt;b&gt; Hello &lt;b&gt;";

Nous pouvons maintenant ajouter cette fonction à notre déclaration de lame échappée:

{!! html_entity_decode($hello) !!}

Cela prendra l'entité HTML &lt;et l'analysera en tant que code HTML <, pas seulement une chaîne.

Il en sera de même pour l'entité supérieure à &gt;

ce qui donnerait

Bonjour

Tout l'intérêt de s'échapper en premier lieu est d'éviter les attaques XSS. Soyez donc très prudent lorsque vous utilisez la syntaxe d'échappement, surtout si les utilisateurs de votre application fournissent eux-mêmes le code HTML, ils peuvent injecter leur propre code à leur guise.


2

Si vous voulez échapper à l'utilisation des données

{{ $html }}

Si vous ne voulez pas échapper à l'utilisation des données

{!! $html !!}

Mais jusqu'à Laravel-4, vous pouvez utiliser

{{ HTML::link('/auth/logout', 'Sign Out', array('class' => 'btn btn-default btn-flat')) }}

En ce qui concerne Laravel-5

{!! HTML::link('/auth/logout', 'Sign Out', array('class' => 'btn btn-default btn-flat')) !!} 

Vous pouvez également le faire avec la fonction PHP

{{ html_entity_decode($data) }}

parcourir le document PHP pour les paramètres de cette fonction

html_entity_decode - php.net


2

Cela fonctionne bien pour Laravel 5.6

<?php echo "$text"; ?>

D'une autre façon

{!! $text !!}

Il ne rendra pas le code HTML et ne sera pas imprimé sous forme de chaîne.

Pour plus de détails, ouvrez le lien: - Afficher HTML avec Blade


1

Pour ceux qui utilisent tinymce et le balisage dans la zone de texte:

{{ htmlspecialchars($text) }}

0

J'y suis allé et c'était ma faute. Et très stupide.

si vous oubliez l'extension .blade dans le nom du fichier, ce fichier ne comprend pas blade mais exécute le code php. Tu devrais utiliser

/resources/views/filename.blade.php

au lieu de

/resources/views/filename.php

j'espère que cela aide quelqu'un



0

Si vous utilisez la classe Bootstrap Collapse, cela {!! $text !!} ne fonctionne parfois pas pour moi mais l' {{ html_entity_decode($text) }}est pour moi.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.