แสดงข้อความธรรมดาเป็น HTML ใน Drupal 8 twig


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>

หวังว่าใครบางคนสามารถช่วยได้

ที่ดีที่สุด

Alari


ข้อความล้วนที่อยู่นอกกล่องมีตัวกรองที่หนีมาร์กอัป |rawไม่ใช่ unescape ที่หลบหนีมาร์กอัปแล้ว การหลบหนีเกิดขึ้นเร็วกว่าการหลบหนีอัตโนมัติของ Twig
Cottser

คำตอบ:


17

วิธีการแก้ปัญหาโดยiworkyonจากชุมชน Drupal:

field - node - [field name] .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 ดูเหมือนชื่อเล่น "ฉันอยู่ที่ทำงาน" ของฉันแอบเข้ามาที่นี่: D การค้นพบความสนุกในขณะที่ googling!
ividyon

หวังว่าคุณจะไม่รังเกียจ :) มันช่วยฉันดังนั้นฉันคิดว่าฉันจะแบ่งปัน
Alari Truuts

7

คุณลองใช้ตัวกรองข้อมูลดิบกับค่าหรือไม่

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

แต่นี่ไม่ปลอดภัย ในการส่งออกไฟล์คุณสามารถใช้ฟิลด์ไฟล์ นี่คือตัวจัดรูปแบบฟิลด์ที่ถูกต้องเพื่อสร้างลิงก์ หากคุณไม่สามารถกำหนดค่าลิงก์ใน UI ตามความต้องการของคุณคุณสามารถแก้ไขกิ่งไม้หรือ preprocess สำหรับฟิลด์เฉพาะนี้


rawกำลังถูกลบไปแล้ว: drupal.org/node/2603074
Clive

4k4: ฟิลด์นี้เป็นฟิลด์ข้อความธรรมดาไม่ใช่ไฟล์ ค่าของฟิลด์จะเป็นมาร์กอัปที่คัดลอกมาของภาพ svg ฉันลองวิธีการแก้ปัญหาของคุณแล้ว แต่ไม่มีอะไรแตกต่างกันยังคงได้รับการตัดเครื่องหมายคำพูดและปัญหา linebreaks ตอนนี้ฉันยังกังวลเกี่ยวกับการใช้ | ดิบหลังจากสิ่งที่ไคลฟ์พูดและยิ่งไกลไปกว่าการหาวิธีแก้ปัญหา
Alari Truuts

คุณยิ่งห่างไกลจากการหาวิธีแก้ปัญหาเพราะคุณพยายามที่จะหลอกล่อการหลบหนีอัตโนมัติและการพยายามทำทุกอย่างเพื่อไม่ให้คุณทำสิ่งนี้ ควรใช้กลไกที่มีเพื่อจัดทำลิงก์ไฟล์ตามที่อธิบายไว้ในคำตอบของฉัน จากนั้นใช้แม่แบบกิ่งไม้ที่เหมาะสมลงบรรทัดเพื่อเปลี่ยนการเรนเดอร์
4k4

4k4: ตอนนี้ฉันสับสนเล็กน้อยเนื่องจากเนื้อหาที่ต้องเก็บในฟิลด์ไม่ใช่ไฟล์ มันอยู่ในรูปแบบของข้อความ / svg-code ฉันอัปเดตคำถามด้วยตัวอย่าง
Alari Truuts

ข้อความธรรมดาจะไม่สามารถส่งออกรหัส svg นี้ คุณลองใช้รูปแบบข้อความ "Full Html" หรือไม่หากสามารถประมวลผล svg-code ได้ ถ้าไม่คุณควรใส่ svg ในไฟล์ svg ของตัวเอง
4k4

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.