웹마스터 팁

글에서는 편리한 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