Jadikan teks biasa sebagai HTML di ranting Drupal 8

Saya mengalami dinding mencoba untuk membuat kode markup gambar svg ke html dari bidang teks biasa.

Saya ingin merender kode svg dari bidang teks biasa tanpa mengabaikan bidang teks biasa yang dirender di tempat lain.

format teks biasa saat ini mengonversi semua tag html dan <> ke < >.

Saya membuat templat bidang dan mencoba keduanya menghasilkan konten bidang sebagai

{{ item.content.context.value }}

dan

{{ item.content|raw }}

keduanya memberikan nilai sebagai string yang membungkus setiap baris dengan "tanda kutip" dan mengonversi pemisah baris menjadi <br/>tag.

Saya sebelumnya memiliki jenis teks yang diformat bidang, tetapi itu juga membungkus segala sesuatu dalam <pre>tag, bahkan ketika semua tag diizinkan. Saya benar-benar ingin membuatnya bekerja dengan teks biasa.

Contoh kode svg yang harus disimpan oleh bidang dalam bentuk teks:

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

Semoga ada yang bisa membantu.

Terbaik,

Alari

8 theming

— Alari Truuts
sumber

Di luar kotak teks biasa memiliki filter yang lolos dari markup. |rawtidak menghapus penghapusan yang sudah lolos markup. Pelarian terjadi lebih awal daripada pelarian otomatis Twig.

— Cottser

Jawaban:

Sebuah solusi oleh iworkyon dari komunitas Drupal:

bidang - simpul - [nama bidang] .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;
    }
}

— Alari Truuts
sumber

Hehe, sepertinya "aku sedang bekerja" nama panggilan IRC saya menyelinap di sini: D Penemuan yang menyenangkan saat googling!

— ividyon

Semoga Anda tidak keberatan :) Ini membantu saya, jadi saya pikir saya akan berbagi.

— Alari Truuts

Apakah Anda mencoba menerapkan filter mentah pada nilainya?

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

Tapi ini tidak aman. Untuk menghasilkan file, Anda dapat menggunakan bidang file. Ini memiliki pemformat bidang yang benar untuk menghasilkan tautan. Jika Anda tidak dapat mengonfigurasi tautan di ui dengan kebutuhan Anda, Anda dapat memodifikasi ranting atau preproses untuk bidang khusus ini.

— 4k4
sumber

rawsedang / telah dihapus: drupal.org/node/2603074

— Clive

4k4: Bidang ini adalah bidang teks biasa dan bukan file. Nilai bidang akan menjadi markup yang disalin dari gambar svg. Saya mencoba solusi Anda, tetapi tidak ada yang berbeda, masih mendapatkan tanda kutip masalah pembungkus dan linebreak. Juga sekarang saya khawatir menggunakan | mentah setelah apa yang dikatakan Clive dan bahkan lebih jauh dari mencapai solusi.

— Alari Truuts

Anda bahkan lebih jauh lagi dari mencapai solusi, karena Anda mencoba mengelabui auto melarikan diri dan mencoba semuanya untuk mencegah Anda melakukan hal ini. Lebih baik gunakan mekanisme yang ada untuk memberikan tautan file seperti yang dijelaskan dalam jawaban saya. Dan kemudian gunakan templat ranting yang sesuai di baris untuk mengubah rendering.

— 4k4

4k4: Saya agak bingung sekarang, karena konten yang harus ditangguhkan bukan file. itu dalam bentuk teks / svg-code. Saya memperbarui pertanyaan dengan sebuah contoh.

— Alari Truuts

Teks biasa tidak akan dapat menampilkan kode svg ini. Apakah Anda mencoba format teks "Full Html", jika ini dapat memproses kode-svg? Jika tidak, Anda sebaiknya meletakkan svg di file svg-nya sendiri.

— 4k4

Ini bekerja untuk saya:

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

— Janey
sumber