Drupal 8 나뭇 가지에서 일반 텍스트를 HTML로 렌더링


16

나는 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이미 이스케이프 처리되지 않은 마크 업입니다. 탈출은 나뭇 가지의 자동 탈출보다 일찍 일어나고 있습니다.
Cottser

답변:


17

Drupal 커뮤니티의 iworkyon 솔루션 :

field--node-[필드 이름] .html.twig :

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

THEME.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;
    }
}

Hehe, "내가 일하고있다"IRC 닉네임이 여기에 스며 들었습니다. : D 인터넷 검색 중 재미있는 발견!
ividyon

당신이 신경 쓰지 않기를 바랍니다 :) 그것은 나를 도왔으므로 공유 할 것이라고 생각했습니다.
Alari Truuts

7

값에 원시 필터를 적용하려고 했습니까?

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

그러나 이것은 안전하지 않습니다. 파일을 출력하기 위해 파일 필드를 사용할 수 있습니다. 링크를 생성하기위한 올바른 필드 포맷터가 있습니다. UI에서 필요에 따라 링크를 구성 할 수없는 경우이 특정 필드에 대한 나뭇 가지 또는 전처리를 수정할 수 있습니다.


raw/ 제거한되고 : drupal.org/node/2603074
클리브

4k4 :이 필드는 파일이 아닌 일반 텍스트 필드입니다. 필드 값은 svg 이미지의 복사 된 마크 업이됩니다. 귀하의 솔루션을 시도했지만 아무런 차이가 없지만 여전히 따옴표 포장 및 줄 바꿈 문제가 발생합니다. 또한 이제 Clive가 말한 후에 raw를 사용하는 것에 대해 걱정하고 있으며 솔루션에 도달하는 것으로부터 더욱 멀어졌습니다.
Alari Truuts

자동 이스케이프 및 drupal을 시도하여이 작업을 수행하지 못하도록 모든 것을 시도하기 때문에 솔루션에 더 도달하지 못합니다. 내 답변에 설명 된대로 파일 링크를 제공하는 메커니즘을 더 잘 사용하십시오. 그런 다음 적절한 나뭇 가지 템플릿을 사용하여 렌더링을 변경하십시오.
4k4

4k4 : 필드가 보유 해야하는 내용이 파일이 아니기 때문에 혼란 스럽습니다. text / svg-code 형식입니다. 예를 들어 질문을 업데이트했습니다.
Alari Truuts

일반 텍스트는이 svg 코드를 출력 할 수 없습니다. svg-code를 처리 할 수 ​​있다면 "Full Html"텍스트 형식을 사용해 보셨습니까? 그렇지 않으면 svg를 자체 svg 파일에 넣는 것이 좋습니다.
4k4 December

6

이것은 나를 위해 일했다 :

{{ item.content['#context'].value|raw }}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.