오픈 소스 프로젝트 - XE 개발 포럼
제가 예전에 썼던 "zbxe를 사용 … 부조리들"의 6번째 문제점으로 지적한 innerHTML을 이용한 XHTML에 맞지 않는 코드 생성 방지 작업을 위해 DOM 트리를 따라 해석하고 whitelist 식의 validation을 적용하여 맞는 태그와 속성만을 통과시키려고 합니다. (DecorateHTMLCode 확장)
헌데, 위 글에서도 썼지만 위젯과 에디터 컴포넌트에서 사용하는 img와 div의 사용자 정의 속성에 상당한 난항을 겪고 있습니다. 위젯이나 에디터 컴포넌트에 따라 천차만별의 속성들이 적용되어서 그렇습니다.
표준에 정의되어 있는 속성을 재사용할 수 있는 방법은 없으므로 사용자 정의 태그가 되어야 합니다만, 이를 일원화 또는 이원화해서 적용하는 것이 좋을 것 같습니다. 예를 들어서,
<div editor_component="code_highlighter" code_type="Php" file_path="/modules/editor/components/latexrender/latexrender.class.php" description="LaTeXRender의 일부분" first_line="124" collapse="false" nogutter="false" nocontrols="false" style="border-style: dotted dotted dotted solid; border-color: rgb(102, 102, 102) rgb(102, 102, 102) rgb(102, 102, 102) rgb(34, 170, 238); border-width: 1px 1px 1px 5px; padding: 5px; background: rgb(250, 250, 250) url(./modules/editor/components/code_highlighter/code.png) no-repeat scroll right top;"> if(!@file_exists($file_path))<br />
이와 같은 코드가 있다면 속성들을 간결화하여서
<div zbxe_module="editor_component:code_highlighter" zbxe_vars="code_type=Php&file_path=/modules/editor/components/latexrender/latexrender.class.php&description=LaTeXRender의+일부분&first_line=124&collapse=false&nogutter=false&nocontrols=false" style="border-style: dotted dotted dotted solid; border-color: rgb(102, 102, 102) rgb(102, 102, 102) rgb(102, 102, 102) rgb(34, 170, 238); border-width: 1px 1px 1px 5px; padding: 5px; background: rgb(250, 250, 250) url(./modules/editor/components/code_highlighter/code.png) no-repeat scroll right top;"> if(!@file_exists($file_path))<br />
물론 큰 변화이기에 당장 적용되는 것은 불가능하겠습니다만, 이와 같이 사용하게 된다면 코딩, 사용, 에디터에서의 xhtml validation, 그리고 추후에 도움이 될 것이라 생각합니다.
![[레벨:5]](./modules/point/icons/default/5.gif "포인트:2745point (84%), 레벨:5/30"){kind=icon}
HNO3물론 관리가 더 어려워지겠지만, 현행으로 계속 갈 경우 div와 img에 대한 비표준 attribute가 걸러지지 않게 됩니다. (<div myattribute="a"> 등)
물론 editor_component와 widget이란 attribute를 보고 거를 지 결정할 수도 있겠지만, 나중에 다른 것을 쓰는 모듈이 더 늘어나면(div@some_module_attribute) 이에 대한 관리는 불가능해지게 됩니다. 그래서 지정된 attribute만을 사용하자는 것입니다. 그렇게 되면 에디터에서 div@some_attribute1, div@some_attribute2를 whitelist에 넣어서 거르지 않을 수 있게 되기 때문입니다.
![[레벨:30]](./modules/point/icons/default/30.gif "포인트:519120point , 레벨:30/30"){kind=icon}
음.. img나 div말고 zbXE만의 element를 제정하여 사용하는 것은 어떨까요?
물론 제로보드4때의 <Zeroboard 처럼 꽁수 말고 말이죠.
아.. div와 같이 컨텐츠를 감싸는 경우는 문제가 생길 수 있겠네요...
위젯과 에디터컴포넌트의 속성을 굳이 key="value"로 한 이유는 손쉬운 컨트롤을 위한 것도 있지만 컨텐츠에 대해 보다 직관적인 응용을 위해서도 필요한 부분이라 고민이 되네요...
뭔가 좋은 대안이 필요할 것 같습니다. ㅡ.ㅜ
HNO3새로운 element를 이용하기 위해서는, HTML 편집 모드에서 WYSIWYG 편집 모드로 변경할 시에 그 element를 기존에 있는 element로 변환하여 삽입하여야 합니다. HTML 편집 모드로 변경 시에는 다시 재변환을 해주어야 하고요.
예를 들자면, <zbxe:editor_component type="latexrender">[…]</zbxe:editor_component>같이 zbxe 네임스페이스를 사용하는 모든 태그를 새로운 element로 제정해 주었다고 치면, WYSIWYG 편집 모드로 변경할 시 <div zbxe_module="editor_component:latexrender">[…]</div>같은 구문으로 바꾸어야만 합니다. 대부분의 브라우저에서는 새로운 element가 발견될 시 반드시 빈 element로 간주(FF)한다거나 잘라내어 버리는 처리(IE)를 하기 때문입니다.
헌데, 이런 처리를 할 바에는 차라리 div에 사용자 정의 attribute 체제로 가는 것이 나을 것입니다. object@classid와 param을 이용한 처리도 생각해 보았습니다만, IE에서는 object의 child를 param 이외에는 잘라버리기 때문에 문제가 됩니다(이럴 경우 WYSIWYG 모드에서 엑스박스가 나오게 되지요).
굳이 img나 div를 사용하는 이유는 편집단계 즉 관리시에 위치에 대한 정보를 바로 파악할 수 있기 때문인데요.
이 장점을 버리기란 사실 어려운 것 같습니다.
그리고 위지윅에디터에서 사용되는 편집 상황에서 DTD 준수를 하지 않는다일뿐 이 원본 content를 xhtml-transitional등으로 출력시에는 xhtml dtd에 맞춰 출력하기 때문에 문제라고 보이지는 않네요.
바로 위 답글 주신 것처럼 현 사용자 정의 체제로 가되 img나 div태그에 editor_component=".." 나 widget=".." 과 같은 zbXE에서 정의된 attribute가 있을 경우 해당 element는 잘라버리지 않는 식으로 하면 좋을 것 같습니다.
중요한 이슈인데 며칠 지나서 다시 올릴겸 정리할 겸 답글 달아봅니다. ^^
현재 구조로는 attribute에 대한 controll이 매우 쉬운 구조이고 value에 대해서도 명확하게 지정/ 사용이 가능해서요.
음... 특정 element의 attbiute중에 editor_component와 같은 것이 있을 경우 attribute에 대한 검사를 하지 않고 pass하도록 하면 좋지 않을까요? ^^;;
그리고 xhtml등의 표준 spec상으로 문제가 있는 attribute이지만 이 컨텐츠를 차후 재사용하기 위해서 zbxe_vars와 같이 통합시키는 것보다 현재 상태가 더 낫지 않을까 싶습니다.
HNO3님의 html 결과 코드 정리에 대해 매우 기대가 큽니다. ^^