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

사용해도 되고...

Posted by freezn