XE, XpressEngine 1.8.20 기준
XE 사용 중 모바일모드에도 사진첨부를 위해 스킨을 수정해서 ckeditor를 적용했다.
그런데 기본상태에서 툴바는 너무 크고 에디터 입력창 자체가 높아 불편하다.
그래서 툴바는 접어놓고, 크기를 줄여보기로 한다.
1차 시도 (실패) :
스킨에서 추가하는 js 에서 ckeditor 에 접근...
ckeditor 호출이 느려, 호출이 끝난 후 다시 접고 줄여야 하는데 문제가 발생한다.
2차 시도 (성공) :
ckeditor는 설정파일이 있다.
모바일인지를 간단히 체크해서, 툴바를 펼치지 않고 높이도 지정해서 로딩되도록 한다.
xe에서 ckeditor의 설정파일은 비어있거나 없을 수 있다. 없으면 만들어준다.
파일 : xe/common/js/plugins/ckeditor/ckeditor/config.js
function checkMobileDevice() {
var mobileKeyWords = new Array('Android', 'iPhone', 'iPod', 'BlackBerry', 'Windows CE', 'SAMSUNG', 'LG', 'MOT', 'SonyEricsson');
for (var info in mobileKeyWords) {
if (navigator.userAgent.match(mobileKeyWords[info]) != null) {
return true;
}
}
return false;
}
if(checkMobileDevice()==true)
{
CKEDITOR.editorConfig = function( config ) {
config.toolbarStartupExpanded = false; // 툴바 접기
config.height = 230; // 높이 설정
config.removePlugins = 'liststyle,tabletools,contextmenu'; // context menu disable
};
CKEDITOR.replace( 'iframe', {
removePlugins: 'contextmenu,tabletools' // context menu disable
} );
붙여넣기를 위해 롱터치 시 번쩍! 나타나는 ckeditor의 context menu 때문에 붙여넣기가 불가능했는데 context menu disable 관련 설정을 찾아 해결했다. 사실 아주 매끄럽지는 못하다.
+
checkMobileDevice() 는 너무 고전적이라 안되는 경우가 있을 수 있다.
https://github.com/kaimallea/isMobile/blob/master/isMobile.js
사용해도 되고...
