Renderizar texto plano como HTML en Drupal 8 twig

16

Me he encontrado con un muro tratando de representar un código de marcado de imagen svg en html desde un campo de texto sin formato.

Estoy buscando renderizar el código svg desde un campo de texto plano sin anular el procesamiento del campo de texto plano en cualquier otro lugar.

El formato de texto plano actualmente convierte todas las etiquetas html y <> a &lt; &gt;.

Creé una plantilla de campo e intenté generar el contenido del campo como

{{ item.content.context.value }}

y

{{ item.content|raw }}

ambos representan el valor como una cadena que envuelve cada línea con "comillas" y convierte los saltos de línea en <br/>etiquetas.

Anteriormente tenía el texto con formato de tipo de campo, pero eso también envolvía todo en <pre>etiquetas, incluso cuando todas las etiquetas estaban permitidas. Realmente me gustaría que funcione con texto sin formato.

Ejemplo del código svg que el campo debe contener en forma de texto:

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

Espero que alguien pueda ayudar.

Mejor,

Alari

8 theming Trufas Alari
fuente
El texto plano listo para usar tiene un filtro que escapa al marcado. |rawno se escapa el marcado ya escapado. El escape ocurre antes que el escape automático de Twig.
Cottser

Respuestas:

17

Una solución de iworkyon de la comunidad Drupal:

campo - nodo - [nombre del campo] .html.twig:

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

TEMA.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;
    }
}
Trufas Alari
fuente
Jeje, parece que mi apodo de IRC "Estoy en el trabajo" apareció aquí: D ¡Descubrimiento divertido mientras buscas en Google!
ividyon
Espero que no te importe :) Me ayudó, así que pensé en compartir.
Alari Truuts
7

¿Intentó aplicar el filtro sin procesar en el valor?

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

Pero esto no es seguro. Para generar archivos, puede usar un campo de archivo. Esto tiene los formateadores de campo correctos para generar el enlace. Si no puede configurar el enlace en la interfaz de usuario según sus necesidades, puede modificar la rama o el proceso previo para este campo específico.

4k4
fuente
rawse está / se ha eliminado: drupal.org/node/2603074
Clive
4k4: el campo es un campo de texto sin formato y no un archivo. El valor del campo será el marcado copiado de una imagen svg. Intenté su solución, pero nada es diferente, todavía recibo el problema de ajuste de líneas y saltos de línea. También ahora estoy preocupado por usar | raw después de lo que dijo Clive y estoy aún más lejos de llegar a una solución.
Alari Truuts
Estás aún más lejos de llegar a una solución, porque intentas engañar al escape automático y drupal intenta todo para desanimarte de hacerlo. Mejor use el mecanismo que está allí para proporcionar enlaces de archivos como se describe en mi respuesta. Y luego use las plantillas de ramitas apropiadas en la línea para cambiar el renderizado.
4k4
4k4: ahora estoy un poco confundido, ya que el contenido que debe contener el campo no es un archivo. tiene la forma de texto / svg-code. Actualicé la pregunta con un ejemplo.
Alari Truuts
El texto sin formato no podrá generar este código svg. ¿Intentó el formato de texto "Full Html", si esto puede procesar el código svg? Si no, es mejor que coloque el svg en su propio archivo svg.
4k4
6

Esto funcionó para mí:

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