모바일 게시판 스킨 개발시 에디터 에디터를 붙여보자.
CKEditor + HTML5 업로더가 기본 적용되면서, 모바일에서도 편리하게 에디터를 붙여볼 수 있게 되었습니다.
하지만 참고 할만한 적용예는 XE Core에 없죠.. 그래서 제가 해본 방법을 공유합니다.
XE 에 에디터를 적용하려면 생기는 문제점부터 알아봅시다.
적용에 걸림돌
- document.controller.php 파일의 insertDocument 메소드는 모바일을 차별한다.
-
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>
/* 줄 바꿈에 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>
<input type="hidden" name="use_html" value="Y" />
<input type="hidden" name="use_editor" value="Y" />
<div class="write_editor">
{$oDocument->getEditor()}
</div>
끝!
참 쉽죠잉~
댓글 18
개인적인 희망사항이지만.. https://github.com/xpressengine/xe-core/pull/1495 가 반영되면 use_html 없이,
<input type="hidden" name="use_editor" value="Y" /> 만 해주면 됩니다.
위파일을 업로드 하시면될거에요. 파일에 들어갈 내용은
var isMyMobile = false;
var mobileInfo = new Array('Android', 'iPhone', 'iPod', 'BlackBerry', 'Windows CE', 'SAMSUNG', 'LG', 'MOT', 'SonyEricsson');
for (var info in mobileInfo){
if (navigator.userAgent.match(mobileInfo[info]) != null){
isMyMobile = true;
break;
}
}
if(isMyMobile==true)
{
CKEDITOR.editorConfig = function( config ) {
config.height = 300;
config.enterMode = CKEDITOR.ENTER_BR;
};
}
검색을 통해 찾은거라 잘못된 부분이 있을지 모르겠네요. 그런데 어찌 되었던 모바일에서 높이가 지정한대로 됩니다. 그리고
config.enterMode = CKEDITOR.ENTER_BR; 은 저희 사이트 모바일 에서는 줄바꿈을 BR로 사용할 필요가 있어 추가한 겁니다.
알려주신대로 해보니깐 높이가 줄여지긴 하는데 중간에 여백?이 생겨요. 이 부분은 어떻게 해결할 수 있을까요?
저건 모바일 스킨으로 쓸 때 입니다.
m.skin 폴더에 넣었을 때 필요한 팁.
http://www.daegu.go.kr/Contents/Content.aspx?cid=78:532
http://funtenna.funshop.co.kr/article/6205?t=topbanner
|@|
http://www.daegu.go.kr/Contents/Content.aspx?cid=78:532
http://funtenna.funshop.co.kr/article/6205?t=topbanner
위에 적어주신대로 했는데 저는 이렇게 작성이 되네요 ㅎㅎ;;
// params[n] += '|@|'+v;이 부분은 뭔지 몰라 일단 주석 처리해서 넘어갑니다. @_@;;