도구 모음 위치 CKEditor4 에서는 편집기 툴바 위치를 사용자가 지정할 수 있습니다. 기본적으로 클래식 기반의 iframe 편집기에서는 툴바가 편집기 UI 상단, 편집 영역 위에 배치됩니다. 하지만, config.toolbarLocation 구성 설정을 사용하여 해당 옵션을 변경할 수 있습니다. 기본 편집기 구현의 경우 'top'(기본값)과 'bottom' 설정 중 하나를 선택할 수 있습니다.# config 파일 내 설정 시// config.toolbarLocation = 'top';config.toolbarLocation = 'bottom'; config 파일을 이용하지 않고, 스크립트로 설정한 replace 구문에서도 편집기 크기 조정을 비활성화 할 수 있습니다.# replace 구문 사용 시C..

CKEditor 크기를 사용자 정의에 맞춰 가로,세로로 조정하거나 가로로만 조정하거나 세로로만 조정할 수 있습니다. 최소 및 최대 크기를 설정하여 사용자 정의에 맞춰 조정을 할 수도 있고 크기 조절에 대한 설정을 비활성화 할 수 있습니다. 그래서 이번 글에서는 CKEditor 크기를 사용자 정의에 맞춰 조정할 수 있는 방법에 대해서 알아보겠습니다. 편집기 크기 조정 및 사용자 정의 해당 기능은 CKEditor 4 공식 다운로드 사이트 에서 제공하는 Standard 및 Full 프리셋에 포함된 Editor Resize 플러그인을 통해 제공됩니다 . 온라인 빌더를 사용하여 사용자 정의 빌드에 추가 할 수도 있습니다 . 너비와 높이 조작은 클래식 편집기 에서만 지원되며 인라인 편집기 에서는 작동하지 않..

이전 작성된 게시글을 통해서 CKEditor4 편집기 크기 조정을 할 수 있고 하는 방법에 대해서 알아보았습니다. 게시글 마지막 대안으로 편집기 크기 조정에 어려움이 있고 신경 쓰지 않고 설정할 수 있는 자동 조절의 기능이 있다고도 소개했는데요. 이번 글은 편집기 자동 조정이란 무엇이고 조정 방법에 대해서 알아보겠습니다. 콘텐츠에 맞춰 편집기 높이 자동 조정 해당 기능은 CKEditor 다운로드 사이트에서 제공하는 CKEditor4 사전 설정에 포함되지 않은 선택적 플러그인을 통해 제공되며 온라인 빌더를 사용하여 사용자 정의 빌드에 추가해야 합니다. 선택 사항인 자동 확장 플러그인을 사용하면 CKEditor4가 편집 영역에 입력되니 콘텐츠의 양과 크기에 따라 자동으로 수직으로 확장되거나 축소되..

CKEditor4 편집기를 이용하다보면 기본적으로 설정되어 있는 높이가 생각보다 작아서 편집기를 활용하는데에 있어서 불편함을 느낀 경험이 있을겁니다. 편집기의 편집 높이 영역이 작을 수록 에디터를 통해서 글 작성하는데에 많은 불편함과 답답함이 있을텐데요. 그런 부분을 개선할 수 있도록 CKEditor4는 편집기 크기를 조정할 수 있는 설정 정보를 제공하고 있습니다.     편집기 크기 조정  CKEditor4 편집기는 클래식 편집기에서만 수정이 가능합니다. 에디터 config 파일 내에서 수정을 진행한다면 config.width, config.height 설정을 통해서 크기를 조정할 수 있습니다. 하지만, CKEditor4 인라인 편집기에서는 해당 설정이 무시됩니다.  클래식 편집기의 너비와 높이는 해당..

CKEditor4를 사용하는 작업자라면 기본적인 설정들을 활용해서 원하는 CKEditor의 형태를 구성해 나갈것입니다. 대표적인 설정으로는 UI 색상, 언어, 크기, 사용 기능의 배치 등등이 있습니다. 다양한 설정들 중, 사용자 인터페이스의 UI 색상 및 언어를 설정할 수 있는 방법에 대해서 알아보겠습니다.     사용자 인터페이스 UI 색상 설정  개발자는 편집기 UI 색상을 쉽게 조정하여 CKEditor 4가 내장된 웹사이트나 애플리케이션의 모양과 느낌에 맞게 만들 수 있습니다. 해당 기능은 소위 "카멜레온" 기능과 호환되는 에디터 스킨에만 사용할 수 있습니다. CKSource에서 만든 스킨, 즉 Moono-Lisa, Moono, Kama Skin은 이미 이를 지원합니다. 사용자 지정 스킨을 사용하는..

많은 웹 개발자들이 스프링을 활용해서 웹 애플리케이션을 개발합니다. 물론 다른 프레임워크 또는 다른 언어들을 이용해서도 웹 애플리케이션을 만듭니다. 필자는 스프링 프레임워크를 이용해서 웹 애플리케이션을 개발합니다. 그래서 여러 플랫폼 개발을 진행할 때 게시판 구성에 필요한 에디터를 보편적으로 많이들 사용하는 에디터를 선정해 구성합니다. 그 중, CKEditor를 에디터로 선정하여 플랫폼에서 사용할 수 있도록 합니다. 물론 다양한 에디터가 존재하므로 그 중 하나를 선택하여 플랫폼을 구성할 수 있을것입니다. 오늘은 스프링 프레임워크를 활용해 CKEditor4 에디터를 적용해보도록 하겠습니다.     CKEditor4 Builder 사용하기 1.  CKEditor4 Builder 접속하기CKEditor4 Bu..

CKEditor는 웹 애플리케이션 개발을 할 때 게시판 CRUD 개발의 내용을 입력 할 때 에디터로 활용할 수 있다. 티스토리 블로그에서 사용하고 있는 에디터, 네이버 스마트 에디터 등등 다양한 플랫폼에서 제공하는 에디터처럼 CKEditor도 내가 원하는 텍스트를 입력하고 크기를 키우고 색상도 설정할 수 있고 강조, 정렬, 표, 이모티콘, 링크, 이미지 추가 등등과 같은 기능을 사용할 수 있다. 다양한 에디터처럼 많은 기능을 제공하고 있고 무료 OPEN SOURCE로 배포하고 있는 CKEditor에 대해서 알아보자.     CKEditor란? CKEditor는 웹 기반의 WYSIWYG(What You See Is What You Get) 텍스트 편집기로, 사용자가 HTML 문서를 쉽게 작성하고 편집할 수..

풀캘린더(FullCalendar) 속성 - 6     FullCalendar JS를 활용하다 보면 굉장히 다양한 속성과 이벤트를 볼 수 있다. 여러 속성들이 어떤 특징들을 가지고 있는지, 풀캘린더가 가지고 있는 이벤트에는 어떤 것들이 있으며 해당 이벤트는 어떤 동작들을 포함하고 있는지 등등에 대해서 잘 모를 때가 많다. FullCalendar JS 공식 홈페이지에서 제공하는 Documents 파일을 보긴 하지만 Docs 문서들을 확인하는 게 아직 익숙지 않은 사람은 문서 보는 방법조차 어려울 수 있다. 그래서 FullCalendar JS에서 사용할 수 있는 속성들을 하나식 살펴보고자 한다. 물론 100% 모든 속성들을 전부 보면 좋겠지만, 가장 중요한 속성들 위주로 확인해 보고 그 외에 속성들은 직접 D..

풀캘린더(FullCalendar) 속성 - 4     FullCalendar JS를 활용하다 보면 굉장히 다양한 속성과 이벤트를 볼 수 있다. 여러 속성들이 어떤 특징들을 가지고 있는지, 풀캘린더가 가지고 있는 이벤트에는 어떤 것들이 있으며 해당 이벤트는 어떤 동작들을 포함하고 있는지 등등에 대해서 잘 모를 때가 많다. FullCalendar JS 공식 홈페이지에서 제공하는 Documents 파일을 보긴 하지만 Docs 문서들을 확인하는 게 아직 익숙지 않은 사람은 문서 보는 방법조차 어려울 수 있다. 그래서 FullCalendar JS에서 사용할 수 있는 속성들을 하나식 살펴보고자 한다. 물론 100% 모든 속성들을 전부 보면 좋겠지만, 가장 중요한 속성들 위주로 확인해 보고 그 외에 속성들은 직접 D..

풀캘린더(FullCalendar) 속성 - 3     FullCalendar JS를 활용하다 보면 굉장히 다양한 속성과 이벤트를 볼 수 있다. 여러 속성들이 어떤 특징들을 가지고 있는지, 풀캘린더가 가지고 있는 이벤트에는 어떤 것들이 있으며 해당 이벤트는 어떤 동작들을 포함하고 있는지 등등에 대해서 잘 모를 때가 많다. FullCalendar JS 공식 홈페이지에서 제공하는 Documents 파일을 보긴 하지만 Docs 문서들을 확인하는 게 아직 익숙지 않은 사람은 문서 보는 방법조차 어려울 수 있다. 그래서 FullCalendar JS에서 사용할 수 있는 속성들을 하나식 살펴보고자 한다. 물론 100% 모든 속성들을 전부 보면 좋겠지만, 가장 중요한 속성들 위주로 확인해 보고 그 외에 속성들은 직접 D..

풀캘린더(FullCalendar) 속성 - 2    FullCalendar JS를 활용하다 보면 굉장히 다양한 속성과 이벤트를 볼 수 있다. 여러 속성들이 어떤 특징들을 가지고 있는지, 풀캘린더가 가지고 있는 이벤트에는 어떤 것들이 있으며 해당 이벤트는 어떤 동작들을 포함하고 있는지 등등에 대해서 잘 모를 때가 많다. FullCalendar JS 공식 홈페이지에서 제공하는 Documents 파일을 보긴 하지만 Docs 문서들을 확인하는 게 아직 익숙지 않은 사람은 문서 보는 방법조차 어려울 수 있다. 그래서 FullCalendar JS에서 사용할 수 있는 속성들을 하나식 살펴보고자 한다. 물론 100% 모든 속성들을 전부 보면 좋겠지만, 가장 중요한 속성들 위주로 확인해 보고 그 외에 속성들은 직접 Do..

풀캘린더(FullCalendar) 속성 - 1     FullCalendar JS를 활용하다 보면 굉장히 다양한 속성과 이벤트를 볼 수 있다. 여러 속성들이 어떤 특징들을 가지고 있는지, 풀캘린더가 가지고 있는 이벤트에는 어떤 것들이 있으며 해당 이벤트는 어떤 동작들을 포함하고 있는지 등등에 대해서 잘 모를 때가 많다. FullCalendar JS 공식 홈페이지에서 제공하는 Documents 파일을 보긴 하지만 Docs 문서들을 확인하는 게 아직 익숙지 않은 사람은 문서 보는 방법조차 어려울 수 있다. 그래서 FullCalendar JS에서 사용할 수 있는 속성들을 하나식 살펴보고자 한다. 물론 100% 모든 속성들을 전부 보면 좋겠지만, 가장 중요한 속성들 위주로 확인해 보고 그 외에 속성들은 직접 D..