Renderuj zwykły tekst jako HTML w gałązce Drupal 8

15

Natknąłem się na ścianę, próbując wyrenderować kod znacznika obrazu svg w formacie HTML z zwykłego pola tekstowego.

Chcę wyrenderować kod svg z prostego pola tekstowego bez nadpisywania renderowania zwykłego pola tekstowego wszędzie indziej.

format zwykłego tekstu konwertuje obecnie wszystkie tagi HTML i <> na &lt; &gt;.

Utworzyłem szablon pola i wypróbowałem oba dane wyjściowe jako

{{ item.content.context.value }}

i

{{ item.content|raw }}

oba wyświetlają wartość jako łańcuch zawijający każdy wiersz „cudzysłowem” i przekształcają podział wiersza na <br/>znaczniki.

Wcześniej miałem tekst sformatowany według typu pola, ale to również zawijało wszystko w <pre>znaczniki, nawet gdy wszystkie znaczniki były dozwolone. Naprawdę chciałbym, aby działał z zwykłym tekstem.

Przykład kodu svg, który pole musi przechowywać w formie tekstowej:

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

Mam nadzieję, że ktoś może pomóc.

Najlepsza,

Alari

Alari Truuts
źródło
Po wyjęciu z pudełka zwykły tekst ma filtr unikający znaczników. |rawnie unescape już uniknął znaczników. Ucieczka ma miejsce wcześniej niż automatyczna ucieczka Twiga.
Cottser

Odpowiedzi:

17

Rozwiązanie iworkyon ze społeczności Drupal:

pole - węzeł - [nazwa pola] .html.twig:

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

TEMAT.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
źródło
Hehe, wygląda na to, że mój pseudonim IRC „Jestem w pracy” wkradł się tutaj: D Zabawne odkrycie podczas googlowania!
ividyon
Mam nadzieję, że nie masz nic przeciwko :) Pomogło mi to, więc pomyślałem, że się podzielę.
Alari Truuts
7

Czy próbowałeś zastosować filtr raw do wartości?

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

Ale to nie jest bezpieczne. Aby wydrukować pliki, możesz użyć pola pliku. Ma to prawidłowe formatery pól do wygenerowania łącza. Jeśli nie możesz skonfigurować łącza w interfejsie użytkownika do swoich potrzeb, możesz zmodyfikować gałązkę lub proces wstępny dla tego konkretnego pola.

4k4
źródło
rawjest / został usunięty: drupal.org/node/2603074
Clive
4k4: Pole jest zwykłym polem tekstowym, a nie plikiem. Wartość pola będzie skopiowanym znacznikiem obrazu svg. Wypróbowałem twoje rozwiązanie, ale nic się nie różni, nadal pojawia się problem z zawijaniem znaków cudzysłowu i łamaniem linii. Teraz też martwię się używaniem raw po tym, co powiedział Clive, i jestem jeszcze daleko od znalezienia rozwiązania.
Alari Truuts,
Jesteś jeszcze dalej od rozwiązania, ponieważ próbujesz oszukać auto ucieczkę, a drupal próbuje wszystkiego, aby zniechęcić cię do zrobienia tego. Lepiej skorzystaj z mechanizmu, który istnieje, aby udostępnić linki do plików, jak opisano w mojej odpowiedzi. A następnie użyj odpowiednich szablonów gałązek wzdłuż linii, aby zmienić rendering.
4k4
4k4: Jestem teraz trochę zdezorientowany, ponieważ zawartość pola, które musi przechowywać, nie jest plikiem. jest w formie kodu tekstowego / svg. Zaktualizowałem pytanie za pomocą przykładu.
Alari Truuts,
Zwykły tekst nie będzie w stanie wygenerować tego kodu SVG. Czy wypróbowałeś format tekstowy „Full Html”, jeśli może to przetworzyć kod svg? Jeśli nie, lepiej umieść svg we własnym pliku svg.
4k4
6

To działało dla mnie:

{{ item.content['#context'].value|raw }}
Janey
źródło