ckeditor4 모바일 PC 툴바 설정 > 그누보드5 팁자료실

그누보드5 팁자료실

ckeditor4 모바일 PC 툴바 설정 정보

ckeditor4 모바일 PC 툴바 설정

본문

ckeditor4 툴바를 모바일과 PC 툴바를 나눌수 없을까 생각했는데 

제가 못찾는건지 모르지만 혹여나 찾는분이 있을까봐 시간 절약이 돼시라고 올려봅니다. 

저같은 경우에는 g5_is_mobile 함수가 안돼었기에  다른것으로 대체합니다.

 

ckeditor4 4.21 기준입니다. (다른 버젼도 상관없다고 생각이 드네요 )
그누보드폴더/plugin/editor/ckeditor4/config.php

툴바 설정은 ckeditor4 4.21 full 버젼 받아서 커스텀 한것입니다.

  https://ckeditor.com/latest/samples/toolbarconfigurator/index.html#basic

 

삭제할 버튼 리스트 찾을때는  툴바에 버튼을 마우스를 올려 놓으시면 풍선도움말이 나옵니다. 

풍선도움말을 보고 ko.js파일에서 검색하여 단어를 찾은후   $mobile_remove  변수에 버튼단어를 적어 놓았네요. 

 

그누보드폴더/plugin/editor/ckeditor4/lang/ko.js  스크립트 파일

 

 

config.php 파일입니다.


var isMyMobile = false;
var mobile_remove="";
//모바일설정
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) {
 //모바일 툴바 삭제할 리스트 
 mobile_remove='sourcearea,exportpdf,templates,bulletedlist,numberedlist,alignLeft,alignRight,alignCenter,justify,toolbar,voiceLabel,';
  isMyMobile = true;
  break;
 }
}
//에디터 툴바 설정 
CKEDITOR.editorConfig = function( config ) {

if(isMyMobile==true) {
 //--- 모바일 ---//
     config.toolbarGroups = [
        
        { name: 'insert', groups: [ 'insert' ] },
        
        //{ name: 'insert',  groups: [ 'insert' ],items: [ 'addImage'] },
        { name: 'colors', groups: [ 'colors' ] },
        { name: 'tools', groups: [ 'tools' ] },
        { name: 'others', groups: [ 'others' ] },
        { name: 'about', groups: [ 'about' ] }
    ];
//모바일 높이 
 config.height = '200px';
//모바일 툴바 버튼 삭제 리스트 
 mobile_remove='sourcearea,exportpdf,templates,bulletedlist,numberedlist,alignLeft,alignRight,alignCenter,justify,toolbar,voiceLabel,';
} else {
 //--- PC ---//
     config.toolbarGroups = [
        
        { name: 'insert', groups: [ 'insert' ] },
        
        //{ name: 'insert',  groups: [ 'insert' ],items: [ 'addImage'] },
        { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
        { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
        { name: 'forms', groups: [ 'forms' ] },
        //'/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
        { name: 'links', groups: [ 'links' ] },
        { name: 'insert', groups: [ 'insert' ] },
        //'/',
        { name: 'styles', groups: [ 'styles' ] },
        { name: 'colors', groups: [ 'colors' ] },
        { name: 'tools', groups: [ 'tools' ] },
        { name: 'others', groups: [ 'others' ] },
        { name: 'about', groups: [ 'about' ] }
    ];
//pc 높이
 config.height = '400px';
}
 
//  버튼 삭제 리스트 (모바일 일때  mobile_remove 변수에 있는것을 담아서 같이 뿌려줌)
    config.removeButtons = mobile_remove+'Save,NewPage,Print,Cut,Copy,Paste,PasteText,PasteFromWord,Undo,Redo,Find,Replace,SelectAll,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,CopyFormatting,RemoveFormat,BidiLtr,BidiRtl,Language,Unlink,Flash,Smiley,SpecialChar,PageBreak,Iframe,Styles,Format,Superscript,Subscript,Strike,ShowBlocks,Indent,Outdent,Preview,CreateDiv,Font,Image';
    config.format_tags = 'p;h1;h2;h3;pre';    
    config.enterMode =CKEDITOR.ENTER_BR;        //엔터키 입력시 br 태그 변경
    config.shiftEnterMode = CKEDITOR.ENTER_P;    //엔터키 입력시 p 태그로 변경
    config.filebrowserImageUploadUrl  = g5_editor_url+"/upload.php?type=Images";
};

 

## 사용 예시 

PC버젼 

3529588126_1674806656.8573.png


모바일버젼 
3529588126_1674806676.8589.png

 

중복이라면 삭제 할께요 

 

추천
7

댓글 2개

전체 2,407 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT