나는 svg 이미지 마크 업 코드를 일반 텍스트 필드에서 HTML로 렌더링하려고 벽에 부딪쳤다.
다른 곳의 일반 텍스트 필드 렌더링을 재정의하지 않고 일반 텍스트 필드에서 svg 코드를 렌더링하려고합니다.
일반 텍스트 형식은 현재 모든 html 태그와 <>를로 변환합니다 < >
.
필드 템플릿을 만들고 필드 내용을 다음과 같이 출력했습니다.
{{ 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
이미 이스케이프 처리되지 않은 마크 업입니다. 탈출은 나뭇 가지의 자동 탈출보다 일찍 일어나고 있습니다.