테스트 사이트 - 개발 중인 베타 버전입니다

게시글에서 막힌 style 뚫기

· 9개월 전 · 1003 · 14

 

1. 우리가 게시판에서 html 모드로 게시글을 작성하면 안 되는 element 가 있고 안 되는 style 이 있습니다.

안 되는 element 를 해제하는 방법은 아래 2개의 게시글을 참고하면 되구요.

https://sir.kr/g5_plugin/11459

https://sir.kr/g5_tip/21394

 

----------

 

2. 문제는 style 을 주었을 때 먹는 애도 있고 안 먹는 애도 있습니다.

예를 들어 저는 유튜브 아이프레임에 16:9 가로 세로 비율을 직접 주고 싶어 style="aspect-ratio:16/9" 를 사용했는데 html5 이후에 들어온 style 이나 레이아웃을 파괴하는 position 같은 것은 다 필터링이 됩니다.

이걸 뚫는 방법입니다. 원하는 엘레먼트의 배열안에 'style' => 'Text' 를 추가해 줍니다.

 

[code]

$add_html_tag -> addElement('iframe', 'Block', 'Flow', 'Common', ['allow' => 'Text', 'allowfullscreen' => 'Bool']);


를 아래처럼


$add_html_tag -> addElement('iframe', 'Block', 'Flow', 'Common', ['style' => 'Text', 'allow' => 'Text', 'allowfullscreen' => 'Bool']);

[/code]

 

----------

 

3. 만일 div 를 맘대로 하고 싶다면 아래코드를 첨가해 주면 되겠죠.

 

[code]

$add_html_tag -> addElement('div', 'Block', 'Flow', 'Common', ['style' => 'Text']);

[/code]

 

----------

 

4. 링크예제에는 유튜브 아이프레임 안에 aspect-ratio 이외에도 포지션 등까지 준 것입니다.

 

[code]

style="display:block;aspect-ratio:16/9;width:100%;max-width:960px;border:none;position:fixed;bottom:0px;left:0px;z-index:100"

[/code]

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 14개

9개월 전

/lib/common.lib.php 에서 
$config = HTMLPurifier_Config::createDefault();
run_event('html_purifier_config', $config, array(
        'html' => $html,
        'write' => $write,
        'is_admin' => $is_admin
    )

위 코드가 훅을 실행하는데 먼저
이렇게 훅이 미리 등록되어있을때 동작하는거네요.
add_event('html_purifier_config', function($config) {
    $add_html_tag = $config -> getHTMLDefinition(1);
    $add_html_tag -> addElement('div', 'Block', 'Flow', 'Common', ['style' => 'Text']);//style 속성이 허용되며, 그 값은 Text 유형이어야 함
}, 1, 1);

몰랐던 디테일이네요. 감사합니다.

9개월 전

@수평선1203 

http://htmlpurifier.org/docs/enduser-customize.html

Type 에는 Enum, Bool, CDATA, ID, Pixels, Length, NMTOKENS, URI, Number 의 아홉가지가 있는데
CDATA 는 Text 로 사용해도 된다고 나오지요. 글자 하나라도 짧은 걸 선호하다 보니까 CDATA 보다는 Text 로 쓰고 있습니다.
테스트 결과 저 아홉가지 중 String 을 의미하는 Text 와 불린값을 의미하는 Bool 딱 두개로 충분합니다.
예컨데 불린값이 필요한 input 의 checked 같은 걸 위해서 Bool 은 꼭 필요합니다. 나머지는 Text 로 다 통용되구요.

9개월 전

@수평선1203 

예를 들어 data-sir 등이 허용될까 싶어서 data-* 로 주니까 오락가락 하더라구요.

그래서 data-option 하나만 Text 로 설정해두고

data-option="하나|둘|셋"

자바스크립트에서 option = dataset.option.split("|") 으로 배열을 만들고

option[0], option[1], option[2] 이리 추출해 내도 되긴 합니다.

9개월 전

본문에 신청폼을 삽입하는데
많은 도움이 되었습니다
감사합니다

9개월 전

@미키손 사용하신 태그가 뭔지 모르겠으나 여하튼 응용폭이 클 거에요.

9개월 전

감사합니다 ^^

9개월 전

@민트다이어리 감사합니다

9개월 전

추천합니다.

9개월 전

@푸른산타 늘 추천해 주시니 감사합니다. 명절 지나고 삼겹살 콜 어때요?

9개월 전

@비타주리 님이라면 언제든 콜입니다^^ 조만간 연락 드릴게요^^

게시글 목록

번호 제목
23606
23598
23585
23579
23578
23564
23550
23549
23548
23529
23510
23507
23481
23471
23453
23452
23450
23436
23428
23404
23396
23389
23380
23369
23350
23337
23317
23307
23298
23290