웹마스터 팁

글에서는 편리한 default 에디터를 사용하지만, 리플은 글처럼 다양한 입력이 필요하다고 생각하지 않아서 textarea 에디터를 사용했는데, 이게 편의기능만 빠졌을 뿐이지 실제로 html 태그 입력에는 전혀 제한이 없습니다.

따라서 리플에서 html 태그를 막기 위해, 예전에 올렸던 글(http://www.zeroboard.com/16798225)에 HNO3님께서 리플로 달아주신 방법을 사용중이었지만, 그게 언젠가부터 버전업 이후로 작동하지 않아서 사실상 포기했었습니다.

사이트에서 리플에 의도적으로 html 태그를 쓰는 경우는 별로 없었지만, 이모티콘을 쓸려고 >나 <가 들어가는 경우는 종종 있었는데(>,.<b 라던가), 그 경우 그 리플 아래에 표시되는 내용들의 레이아웃이 전부 다 아작나지요.

그런데 가만히 생각해보니 default 에디터에서는, >나 <가 &gt;나 &lt;로 알아서 변환이 되더군요. 그럼 default 에디터의 해당 부분을 textarea에 갖다 붙이기만 하면 문제가 해결되겠다는 감이 와서 한번 해봤습니다.

수정해야 할 파일은 zbxe/modules/editor/skins/textarea/js/xe_interface.js 입니다.


수정 전

function editorStartTextarea(editor_sequence, content_key, primary_key) {
    var obj = xGetElementById('editor_'+editor_sequence);
    obj.form.setAttribute('editor_sequence', editor_sequence);

    obj.style.width = '99%';

    editorRelKeys[editor_sequence] = new Array();
    editorRelKeys[editor_sequence]["primary"] = obj.form[primary_key];
    editorRelKeys[editor_sequence]["content"] = obj.form[content_key];
    editorRelKeys[editor_sequence]["func"] = editorGetContentTextarea;

    var content = obj.form[content_key].value;
    content = content.replace(/<br([^>]+)>/ig,"");
    obj.value = content;
}

function editorGetContentTextarea(editor_sequence) {
    var obj = xGetElementById('editor_'+editor_sequence);
    var content = obj.value.trim();
    content = content.replace(/(\r\n|\n)/g, "<br />$1");
    return content;
}


수정 후

function editorStartTextarea(editor_sequence, content_key, primary_key) {
    var obj = xGetElementById('editor_'+editor_sequence);
    obj.form.setAttribute('editor_sequence', editor_sequence);

    obj.style.width = '99%';

    editorRelKeys[editor_sequence] = new Array();
    editorRelKeys[editor_sequence]["primary"] = obj.form[primary_key];
    editorRelKeys[editor_sequence]["content"] = obj.form[content_key];
    editorRelKeys[editor_sequence]["func"] = editorGetContentTextarea;

    var content = obj.form[content_key].value;
    content = content.replace(/<br([^>]+)>/ig,"");
    content = content.replace(/&lt;/g, "<");
    content = content.replace(/&gt;/g, ">");
    content = content.replace(/&quot;/g, '"');
    content = content.replace(/&amp;/g, "&");
    obj.value = content;
}

function editorGetContentTextarea(editor_sequence) {
    var obj = xGetElementById('editor_'+editor_sequence);
    var content = obj.value.trim();
    content = content.replace(/&/g, "&amp;");
    content = content.replace(/</g, "&lt;");
    content = content.replace(/>/g, "&gt;");
    content = content.replace(/\"/g, "&quot;");
    content = content.replace(/(\r\n|\n)/g, "<br />$1");
    return content;
}

default 스킨의 해당 자바스크립트(zbxe/modules/editor/skins/default/js/xe_interface.js)를 보시면 아시겠지만 필요한 부분만 갖다 붙인 것입니다. defalut의 파일을 그대로 올리면 약간 차이가 나는 부분 때문에 스킨이 깨지더군요.

귀찮으신 분들은 그냥 zbxe/modules/editor/skins/textarea/js/xe_interface.js를 아래 파일로 대체하시면 됩니다. 
xe_interface.js

제목 글쓴이 날짜
SSL 적용시 작은 iframe 없애기 [1] file explode 2013.11.28
multimedia file 첨부 시 자동으로 jw player 로 설정 더뿌 2013.11.27
추천/비추천/신고시 확인(메시지 창 띄우기)하기 [21] explode 2013.11.27
phpMyAdmin 사용시 주의 사항 [2] explode 2013.11.27
메시지톡 버튼 게시판에 넣기 [18] file 착한악마 2013.11.26
디자인을 위한 팁...Adobe Generator for Photoshop CC [7] kj1212_ 2013.11.26
[수정] 댓글 삭제 간략화하기 [9] XE만세 2013.11.26
[수정]알림센터 Lite에 메일발송 기능을 추가하기 [11] file 매실茶 2013.11.25
AXISJ AXUpload5(HTML5) 파일첨부란 높이 조정하는 방법 [6] 착한악마 2013.11.25
에디터 "입력창 크기 자동조절" 체크를 기본으로 하기 [8] 투씨 2013.11.24
댓글창 배경이미지 클릭시 사라지게 만들기 [2] 귀머거리하늘 2013.11.23
'본문내 이미지 조절 애드온' 이 페이지모듈에서는 자동으로 작동 안 하게 하는 방법 sejin7940 2013.11.23
롤링 배너 이해하는데 도움이 될것 같아 올립니다 [4] file 예뜨락 2013.11.22
도메인이 바뀐후 기본 URL을 바꿨지만 2차메뉴의 링크는 바뀌지 않은 경우. [9] Ryuj 2013.11.20
모바일 게시판 사용시 글 수정 / 댓글 수정 누르면 <br/> 태그가 뜰때 팁 [12] 사쿠냥ㅋ 2013.11.19
Content 확장위젯2 에서 권한설정 안되던 버그 xe1.7 garnecia 2013.11.18
다운로드 랭킹 위젯 simulz 님 스킨 단락 흐트러짐 문제 해결 [2] socialskyo 2013.11.14
레이아웃을 불려오지 않게 하는 코드 [4] 착한악마 2013.11.13
본문 링크 새창으로 띄우기.. [9] 멀티비타민 2013.11.11
복권 모듈 가운데 긁었을때 반응하게 하기 [6] file 귀머거리하늘 2013.11.09