Візуалізуйте звичайний текст у вигляді HTML у гілці Drupal 8


15

Я наткнувся на стіну, намагаючись перетворити код розмітки SVG у HTML із простого текстового поля.

Я хочу вивести SVG-код із простого текстового поля, не змінюючи візуалізацію простого текстового поля скрізь.

формат простого тексту в даний час перетворює всі теги HTML і <> в &lt; &gt;.

Я створив шаблон поля і спробував обидва виводити вміст поля як

{{ item.content.context.value }}

і

{{ item.content|raw }}

обидва візуалізують значення у вигляді рядків, що обгортають кожен рядок "лапки" та перетворюють розриви рядків у <br/>теги.

Я раніше мав текст у форматі поля, але це також загортало все в <pre>теги, навіть коли дозволено всі теги. Мені б дуже хотілося, щоб це працювало з простим текстом.

Приклад svg-коду, який має містити поле у ​​текстовій формі:

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

Сподіваюся, хтось може допомогти.

Найкраще,

Аларі


З простого тексту звичайний текст містить фільтр, який уникає розмітки. |rawне скасовує вже відхилену розмітку. Втеча відбувається раніше, ніж автоматична втеча Twig.
Котцер

Відповіді:


17

Рішення від iworkyon від спільноти Drupal:

field - node - [назва поля] .html.twig:

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

ТЕМА.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;
    }
}

Хе-хе, схоже на те, що мій псевдонім IRC IRC проникнув сюди: D Весело відкриття, поки гугли!
ividyon

Сподіваюся, ви не заперечуєте :) Це мені допомогло, тому я подумав, що поділюсь.
Аларі Труут

7

Чи намагалися ви застосувати необроблений фільтр до значення?

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

Але це не безпечно. Для виводу файлів можна використовувати поле файлу. Це має правильні формати форматів для генерації посилання. Якщо ви не в змозі налаштувати посилання в інтерфейсі для ваших потреб, ви можете змінити гілочку або попередню обробку для цього конкретного поля.


rawвидалено / було видалено: drupal.org/node/2603074
Clive

4k4: поле - це звичайне текстове поле, а не файл. Значення поля буде скопійованою розміткою SVG-зображення. Я спробував ваше рішення, але нічого не відрізняється, все-таки отримайте загортання лапок і випуск рядків. Також зараз я переживаю за використання | сировини після того, що сказав Клайв, і я ще більше досягаю рішення.
Аларі Труут

Ви ще більше досягаєте рішення, тому що намагаєтесь обдурити авто втечу і друпал намагається все, щоб відмовити вас від цього. Краще скористайтеся механізмом, який існує для надання посилань на файли, як описано в моїй відповіді. А потім використовуйте відповідні шаблони гілочок вниз по лінії, щоб змінити візуалізацію.
4k4

4k4: Зараз я трохи заплутався, оскільки вміст, який має містити поле, не є файлом. у вигляді тексту / svg-коду. Я оновив питання на прикладі.
Аларі Труут

Звичайний текст не зможе вивести цей SVG-код. Ви спробували текстовий формат "Full Html", якщо це може обробити svg-код? Якщо ні, то краще помістити svg у свій svg-файл.
4k4

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.