모바일 및 기타 상황에서 ckeditor 높이 조절

가입하고 처음 글을 씁니다.

조금 전에 사이트 만들다가 모바일에서 에디터 높이를 조절해야 하는데, 검색해보니 나오지 않더군요.

그렇다고 코어 건드리기는 좀 뭐하고, 건드린다 해도 제대로 되지도 않고.

그래서, 그냥 아래와 같이 css를 강제 적용하는 단순한 방법을 썼습니다.

게시판 스킨은 XEDITION 기준으로 설명합니다.

(전 xedition 스킨을 모바일에 어울리게 약간 손 봐서 적용했습니다만, 그냥 원본을 적용해도 크게 나쁘진 않더군요)

modules > board > m.skins > xedition

테스트 환경 : 크롬에서 모바일 모드, 안드로이드

(아이폰은 없어서 테스트 못했으나 아마도 될 듯 싶어요;)
 

아래 두 파일의 맨 끝에 스타일 태그를 필요에 따라 넣어주면 됩니다.

_comment.html : 댓글 목록 아래에 표시되는 댓글 입력창입니다.

comment_form.html : 대댓글이나 댓글 수정할 때 표시되는 댓글 입력창입니다.

========================================

<style>
 .cke_contents {height: 150px !important;}
 .xefu-dropzone {text-align: center;}
 .xefu-dropzone-message {display: none !important;}
 .xefu-controll {text-align: center;}
 .xefu-controll > div {float: none !important;}
</style>

========================================

.cke_contents : 댓글창 높이 입니다. 전 목록 아래에 표시되는 건 70px로 좀 작게 표시되게 했고, 대댓글이나 수정에선 따로 페이지가 호출되니 좀 넓게 150px로 했습니다.

.xefu-dropzone : 파일첨부 공간입니다. 모바일에선 가운데 정렬이 보기가 좋아서요;

.xefu-dropzone-message : 이곳에 파일을 끌어다 놓으~ 어쩌구 하는 메시지를 숨깁니다. 모바일에서 끌어다 놓을 일 없으니까요.

.xefu-controll : 첨부파일이 있을 경우 나타나는 곳입니다. 역시 가운데 정렬.

.xefu-controll > div : 첨부파일 크기 메시지와 [본문 삽입] [선택 삭제] 버튼을 감싼 div입니다. 이들의 float 을 없앱니다. 그래야 위에서 적용한 가운데 정렬이 되니까요.

각자 필요한 것만 적용하시면 될 듯 합니다.