메뉴 건너뛰기

phiz 2016.06.18 18:25
조회 수 : 3431

phiz mobile themes에 사용되는 에디터입니다.

모바일에서 위지웍 에디터를 적용해도 xe자체의 제한 때문에 모바일에서 글쓰기할 때 html이 적용이 안되는 등 부작용이 있습니다.
이럴 경우 코어를 수정하거나 phiz mobile themes를 사용하시면 해결됩니다.

phiz mobile themes는 코어수정 없이 모바일에서도 완벽하게 피시와 동일하게  사용하실 수 있습니다.

**라이센스는 xe와 ckeditor 라이센스에 따릅니다.

 

데모보러가기

 

xe에서 기본 제공되는 ckeditor를 모바일에서도 원할하게 사용할 수 있도록 수정한 버전입니다.

  • xe기본제공되는 에디터와 동일하며
  • 에디터의 높이를 자동조절해주는 autogrow 플러그인을 적용하였고
  • 불필요한 버튼, 프러그인을 제거할 수 있도록 하였으며
  • 피시와 모바일에서 다르게 적용되도록 하였습니다.

xe 관리자 페이지에서 상세한 에디터 설정을 할 수 없으므로 개인 취향에 맞는 설정은 직접 코드를 수정해야 합니다.

 

파일 구조  

1. 플러그인

common/js/plugins/ckeditor/ckeditor/plugins/autogrow

2. 에디터 스킨

modules/editor/skins/phiz_ckeditor

 

첨부파일을 다운로드한 후 압축을 풀고 그대로 업로드하면 경로에 맞게 업로드 됩니다.

 

<< 사용법 >>

파일을 경로에 맞게 업로드 한 후 관리자페이지 > 고급 > 에디터에서 설정

게시판 관리자 페이지에서 에디터 변경

 

<< 에디터 높이 조절 >>

 

최소높이와 최대 높이를 설정합니다.

초기화면시 최소높이로 출력되고 줄바뀜이 일어나서 bottomSpace 에 도달하면 최대 높이까지 늘어나며 그이상은 스크롤됩니다.

 

    settings.ckeconfig.autoGrow_minHeight = 80;
    settings.ckeconfig.autoGrow_maxHeight = 120;

 

<<xe 기본설정 메뉴아이콘 버튼 제거>>


phiz_cheditor/editor.html에 다음 예와 같이 설정한다.

플러그인을 제거하거나 버튼을 제거시 xe기본설정에서 language 등 제거된 것이 나타난다.
따라서 안보이던 버튼이 나타나면 같이 제거해 주어야한다.

 

플러그인 제거를 원칙으로 하나 개별적으로 버튼을 제거할 필요가 있는 것은 버튼을 제거한다.
버튼명은 대문자로 시작한다.

settings.ckeconfig.removePlugins = 'undo,redo,pastetext';
settings.ckeconfig.removeButtons = 'Save,Preview,Print,Cut,Copy,Paste,Source,Language';

 

피시,모바일,본문,댓글 조건문은 아래와같다.

// 모바일 댓글

<!--@if($module_type == 'comment' && Mobile::isMobileCheckByAgent())-->

settings.ckeconfig.removePlugins = 'undo,redo,pastetext';

// 모바일 본문

<!--@elseif($module_type !== 'comment' && Mobile::isMobileCheckByAgent())-->

settings.ckeconfig.removePlugins = 'undo,redo,pastetext';

// 피시 댓글

<!--@elseif($module_type == 'comment' && !Mobile::isMobileCheckByAgent())-->

settings.ckeconfig.removePlugins = 'undo,redo,pastetext';

// 피시 본문

        <!--@else-->

settings.ckeconfig.removePlugins = 'undo,redo,pastetext';

        <!--@endif-->

 

xe 자체의 에디터컴포넌트 삭제는 관리자페이지에서 사용여부를 설정한다.

 

<<<xe 기본설정 메뉴아이콘>>>
    // 소문자로 시작하는 것은 settings.ckeconfig.removePlugins = 'undo,redo,pastetext'; 구문으로 제거한다.
    // 대문자로 시작하는 것은 settings.ckeconfig.removeButtons = 'Source'; 구문으로 제거한다.
undo : 실행 취소
redo : 다시 실행 // undo 제거시 자동제거됨
pastetext : 텍스트로 붙여넣기
pastefromword : MS Word 에서 붙여넣기
find : 찾기
replace : 바꾸기 // find 제거시 자동삭제됨
selectall : 모두 선택
link : 링크 삽입/변경
unlink : 링크 지우기 // link 삭제시 자동삭제됨
anchor : 책갈피 // link 삭제시 자동삭제됨
image : 이미지
flash : 플래시
table : 표 // table,tabletools 두개를 같이 제거해야함
tabletools : 표도구 // table,tabletools 두개를 같이 제거해야함
horizontalrule : 가로 줄 삽입
pagebreak : 인쇄시 페이지 나누기 표시
maximize : 최대화
showblocks : 블록 보기
Source : 소스
Bold : 굵게
Italic : 기울임꼴
Underline : 밑줄
Strike : 취소선
Subscript : 아래 첨자
Superscript : 위 첨자
removeformat : 형식 지우기 // 플러그인을 제거한다.
NumberedList : 순서 있는 목록
BulletedList : 순서 없는 목록
Outdent : 내어쓰기
Indent : 들여쓰기
Blockquote : 인용 단락
div : Div 태그 생성
JustifyLeft : 왼쪽 정렬
JustifyCenter : 가운데 정렬
JustifyRight : 오른쪽 정렬
JustifyBlock : 양쪽 맞춤
bidi : 문자 방향
Styles : 스타일
Format : 문단
Font : 폰트
FontSize : 글자크기
TextColor : 글자 색상
BGColor : 배경 색상

 


<<xe 에디터컴포넌트 - xe 관리자페이지에서 제거>>
emoticon : 이모티콘 출력
image_link : 이미지 추가
poll_maker : 설문조사
image_gallery : 이미지 갤러리

 

<< 에디터 스킨 수정은 phiz_ckeditor/css/default.css 에서 합니다.>>

 

참고 : xe에서 사용하는 프러그인

 

a11yhelp, basicstyles, bidi, blockquote, clipboard, colorbutton, colordialog, contextmenu, dialogadvtab, div, elementspath, enterkey, entities, find, flash, floatingspace, font, format, horizontalrule, htmlwriter, image, imageresize, indentblock, indentlist, justify, language, link, list, liststyle, magicline, maximize, onchange, pagebreak, pastefromword, pastetext, preview, print, removeformat, resize, save, selectall, showblocks, showborders, sourcearea, stylescombo, tab, table, tabletools, templates, toolbar, undo, wysiwygarea

 

 

 

파일 다운로드