테스트 사이트 - 개발 중인 베타 버전입니다

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 파일입니다.

[code]
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";
};
[/code]

 

## 사용 예시 

PC버젼 

3529588126_1674806656.8573.png


모바일버젼 
3529588126_1674806676.8589.png

 

중복이라면 삭제 할께요 

 

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 2개

좋은팁 공개해 주셔서 감사합니다.
고생하셨습니다. 좋은 기능을 공개해 주셔서 감사합니다.

게시판 목록

그누보드5 팁자료실

글쓰기
🐛 버그신고