Drupal 8の小枝でプレーンテキストをHTMLとしてレンダリングする


16

プレーンテキストフィールドからsvgイメージマークアップコードをhtmlにレンダリングしようとして壁にぶつかりました。

プレーンテキストフィールドレンダリングを他の場所でオーバーライドせずに、プレーンテキストフィールドからsvgコードをレンダリングしようとしています。

プレーンテキスト形式は現在、すべてのhtmlタグと<>をに変換し&lt; &gt;ます。

フィールドテンプレートを作成し、両方のフィールドコンテンツを出力しようとしました

{{ item.content.context.value }}

そして

{{ item.content|raw }}

どちらも、値を「引用符」ですべての行をラップする文字列としてレンダリングし、改行を <br/>タグにます。

以前はフィールドタイプの書式設定されたテキストがありましたが、それでもすべてがラップされていました <pre>、すべてのタグが許可されて、タグでいました。プレーンテキストで動作するようにしたいです。

フィールドがテキスト形式で保持する必要があるsvg-codeの例:

<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

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
Clive

4k4:フィールドはプレーンテキストフィールドであり、ファイルではありません。フィールド値は、svg画像のコピーされたマークアップになります。私はあなたの解決策を試しましたが、何も違いはありませんが、引用符の折り返しと改行の問題が発生します。また、今、私はCliveが言ったことの後に生を使用することを心配しており、ソリューションに到達することからさらに遠くなっています。
Alari Truuts

自動エスケープとdrupalをだまそうとすると、これを行うのを思いとどまらせるため、ソリューションに到達することはさらに難しくなります。私の答えで説明されているように、そこにあるメカニズムを使用して、ファイルリンクを提供することをお勧めします。次に、適切な小枝テンプレートを使用して、レンダリングを変更します。
4k4

4k4:フィールドが保持しなければならないコンテンツはファイルではないので、少し混乱しています。text / svg-codeの形式です。例で質問を更新しました。
Alari Truuts

プレーンテキストは、このsvgコードを出力できません。これがsvg-codeを処理できる場合、テキスト形式「Full Html」を試しましたか?そうでない場合は、独自のsvgファイルにsvgを配置することをお勧めします。
4k4

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.