모바일 게시판 스킨 개발시 에디터 에디터를 붙여보자.

CKEditor + HTML5 업로더가 기본 적용되면서, 모바일에서도 편리하게 에디터를 붙여볼 수 있게 되었습니다.

하지만 참고 할만한 적용예는 XE Core에 없죠.. 그래서 제가 해본 방법을 공유합니다.

XE 에 에디터를 적용하려면 생기는 문제점부터 알아봅시다.

적용에 걸림돌

document.controller.php 파일의 insertDocument 메소드는 모바일을 차별한다.
1. ```
if(Mobile::isFromMobilePhone())
		{
		    if($obj->use_html != 'Y')
		    {
		        $obj->content = htmlspecialchars($obj->content, ENT_COMPAT | ENT_HTML401, 'UTF-8', false);
		    }
		    $obj->content = nl2br($obj->content);
		}
```
  insertDocument 메소드 내 위와 같은 코드 때문에, 단순히 에디터만 넣게 되면, htmlspecialchars 와 nl2br 처리를 받게 되고 원하는 결과를 얻을 수 없습니다.

위 걸림돌은 글을 수정할 때도 마찬가지고, 댓글을 등록할 떄도 마찬가지입니다.

그나마 나은 점

$obj->use_html 은 client 에서 전송할 수 있는 변수입니다. <input name="use_html" content="Y" /> 같은 식으로 전송할 수 있습니다.

거두절미하고 적용해봅시다. 우리가 해야할 것은

use_html 변수 전송
nl2br 처리를 피하기 위한 줄바꿈 문자열 삭제

입니다.

<1> use_html 변수 Y로 전송

<form> 안에 <input type="hidden" name="use_html" value="Y" /> 도 넣어줍니다.

<2> 줄바꿈 문자열 삭제

방법: form submit 순간에 줄바꿈 문자열을 삭제해서 전송합시다.
주의사항: onsubmit="return procFilter(this, window.insert)" 를 제거해야 합니다.

줄바꿈 문자 삭제 전송 스크립트

아래에 #ms_write 부분은 글쓰기 FORM 의 id 값에 맞게 고쳐주세요. ^^

<script>
/* 줄 바꿈에 br 태그를 넣어버리는 XE Core 회피를 위해서 line-break를 모두 지움 by MinSoo Kim */
jQuery(window).load(function($){
    jQuery("#ms_write").submit(function( event ) {
        var contents = jQuery("[name='content']",this).val().replace(/(\r\n|\n|\r)/gm,'');
        jQuery("[name='content']",this).val(contents);

        var params = [], data = jQuery(this).serializeArray();
        jQuery.each(data, function(i, field) {
            var v = jQuery.trim(field.value), n = field.name;
            if(!v || !n) return true;

            if(/\[\]$/.test(n)) n = n.replace(/\[\]$/, '');
            if(params[n]) {
                params[n] += '|@|'+v;
            } else {
                params[n] = field.value;
            }
        });
        var response_tags = ['error','message','mid','document_srl','category_srl'];

        exec_xml('board', 'procBoardInsertDocument', params, function(a) { completeDocumentInserted(a); }, response_tags, params);
        return false;
    });
});
</script>

<3> 에디터 넣기

<textarea> 대신 다음 코드를 넣습니다.

<input type="hidden" class="write_content" name="content" value="{str_replace(array("\r\n","\n"),array('',''),$oDocument->getContentText())}" />
<input type="hidden" name="use_html" value="Y" />
<input type="hidden" name="use_editor" value="Y" />
<div class="write_editor">
    {$oDocument->getEditor()}
</div>

끝!

참 쉽죠잉~