Rendern von einfachem Text als HTML in Drupal 8 Zweig

16

Ich bin auf eine Wand gestoßen, die versucht, einen SVG-Bild-Markup-Code aus einem Nur-Text-Feld in HTML zu rendern.

Ich versuche, den SVG-Code aus einem Nur-Text-Feld zu rendern, ohne das Nur-Text-Feld-Rendering an anderer Stelle zu überschreiben.

Im Nur-Text-Format werden derzeit alle HTML-Tags und <> in konvertiert &lt; &gt;.

Ich habe eine Feldvorlage erstellt und versucht, den Feldinhalt als auszugeben

{{ item.content.context.value }}

und

{{ item.content|raw }}

Beide rendern den Wert als String, der jede Zeile in Anführungszeichen setzt und Zeilenumbrüche in <br/>Tags umwandelt .

Früher hatte ich den Feldtyp formatierten Text, aber das hat auch alles in <pre>Tags eingeschlossen, selbst wenn alle Tags erlaubt waren. Ich würde es wirklich gerne mit einfachem Text zum Laufen bringen.

Beispiel für den SVG-Code, den das Feld in Textform enthalten muss:

<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>

Hoffe jemand kann helfen.

Beste,

Alari

8 theming Alari Truuts
quelle
Standardmäßig verfügt Klartext über einen Filter, der Markups entgeht. |rawnicht entkommen bereits entkommenen Markup. Die Flucht geschieht früher als die automatische Flucht von Twig.
Cottser

Antworten:

17

Eine Lösung von iworkyon aus der Drupal-Community:

Feld - Knoten - [Feldname] .html.twig:

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

THEMA.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
quelle
Hehe, es sieht so aus, als ob mein IRC-Spitzname "I'm at work" hier reingeschlichen ist: D Lustige Entdeckung beim Googeln!
ividyon
Hoffe es macht dir nichts aus :) Es hat mir geholfen, also dachte ich, ich würde teilen.
Alari Truuts
7

Haben Sie versucht, den Rohfilter auf den Wert anzuwenden?

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

Dies ist jedoch nicht sicher. Zur Ausgabe von Dateien können Sie ein Dateifeld verwenden. Dies hat die richtigen Feldformatierer, um den Link zu generieren. Wenn Sie den Link in der Benutzeroberfläche nicht entsprechend Ihren Anforderungen konfigurieren können, können Sie den Zweig oder den Vorprozess für dieses bestimmte Feld ändern.

4k4
quelle
rawwird / wurde entfernt: drupal.org/node/2603074
Clive
4k4: Das Feld ist ein Klartextfeld und keine Datei. Der Feldwert ist das kopierte Markup eines SVG-Bildes. Ich habe Ihre Lösung ausprobiert, aber nichts ist anders. Es treten immer noch Anführungszeichen und Zeilenumbrüche auf. Auch jetzt mache ich mir Sorgen, nach dem, was Clive gesagt hat, | raw zu verwenden, und bin sogar noch weiter von einer Lösung entfernt.
Alari Truuts
Sie sind sogar noch weiter von einer Lösung entfernt, da Sie versuchen, das automatische Escape-Verfahren zu umgehen, und Drupal alles versucht, um Sie davon abzuhalten, dies zu tun. Verwenden Sie besser den Mechanismus, der vorhanden ist, um Dateilinks bereitzustellen, wie in meiner Antwort beschrieben. Verwenden Sie anschließend die entsprechenden Zweigvorlagen, um das Rendering zu ändern.
4.
4k4: Ich bin jetzt etwas verwirrt, da der Inhalt, den das Feld enthalten muss, keine Datei ist. Es ist in Form von Text / SVG-Code. Ich habe die Frage mit einem Beispiel aktualisiert.
Alari Truuts
Nur Text kann diesen SVG-Code nicht ausgeben. Haben Sie das Textformat "Full Html" ausprobiert, wenn dies den SVG-Code verarbeiten kann? Wenn nicht, legen Sie das svg besser in einer eigenen svg-Datei ab.
4. April,
6

Das hat bei mir funktioniert:

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