CKEditor4 편집기 자동 확장

 

이전 작성된 게시글을 통해서 CKEditor4 편집기 크기 조정을 할 수 있고 하는 방법에 대해서 알아보았습니다. 게시글 마지막 대안으로 편집기 크기 조정에 어려움이 있고 신경 쓰지 않고 설정할 수 있는 자동 조절의 기능이 있다고도 소개했는데요. 이번 글은 편집기 자동 조정이란 무엇이고 조정 방법에 대해서 알아보겠습니다.

 

 

 

 

 

콘텐츠에 맞춰 편집기 높이 자동 조정

 

해당 기능은 CKEditor 다운로드 사이트에서 제공하는 CKEditor4 사전 설정에 포함되지 않은 선택적 플러그인을 통해 제공되며 온라인 빌더를 사용하여 사용자 정의 빌드에 추가해야 합니다. 선택 사항인 자동 확장 플러그인을 사용하면 CKEditor4가 편집 영역에 입력되니 콘텐츠의 양과 크기에 따라 자동으로 수직으로 확장되거나 축소되도록 구성할 수 있습니다.

 

 

 

 

 

최소 및 최대 높이

 

편집기가 줄어들거나 늘어날 최소 및 최대 높이를 설정하여 자동 편집기 높이 조정을 미세 조정할 수 있습니다.

• CKEDITOR.config.autoGrow_minHeight 옵션
  : 편집기가 포함하는 콘텐츠의 양에 관계없이 항상 가정하는 최소 높이를 정의합니다.
• CKEDITOR.config.autoGrow_maxHeight 옵션: 콘텐츠의 양이 너무 많아 편집기가 무한히 확장되는 상황을 방지할 수 있습니다.

 

 

 

편집기가 줄어들거나 늘어날 최소 및 최대 높이를 설정하여 자동 편집기 높이 조정을 미세 조정할 수 있습니다.

• CKEDITOR.config.autoGrow_minHeight 옵션 은 편집기가 포함하는 콘텐츠의 양에 관계없이 항상 가정하는 최소 높이를 정의합니다.
• CKEDITOR.config.autoGrow_maxHeight 옵션 을 설정하면 콘텐츠의 양이 너무 많아 편집기가 무한히 확장되는 상황을 방지할 수 있습니다.

다음 예에서 편집기는 콘텐츠 양에 따라 커지거나 작아지지만 항상 최소 250픽셀 높이를 유지하며 600픽셀을 초과하지 않습니다.

config.extraPlugins = 'autogrow';
config.autoGrow_minHeight = 250;
config.autoGrow_maxHeight = 600;

 

 

 

 

 

 

적용 모습 예시

 

단 두 개의 짧은 문단으로 구성된 콘텐츠만 있으면 편집기는 위 예시에서 볼 수 있듯이 정의된 최소 자동 증가 높이인 250픽셀을 가정합니다. 기본 'autoGrow_minHeight'의 값이 250px이므로 최소 높이의 길이는 250px로 고정되어 있을겁니다.

 

 

 

계속해서 텍스트를 추가하면 편집기가 콘텐츠에 맞게 확장되기 시작합니다. 기본 250px의 높이로 설정되어 있다가 글작성에 의해 텍스트가 점차적으로 추가되면 CKEditor 편집기 높이가 차츰 증가하는걸 확인할 수 있습니다.

 

 

 

콘텐츠가 더 추가되면 편집기는 최대 자동 크기 조절 높이인 600픽셀에 도달할 때까지 확장됩니다. 콘텐츠가 더 길어지면 스크롤바가 나타납니다. 동시에 방금 입력한 내용을 삭제하기 시작하면 편집기가 정의된 최소 자동 증가 높이인 250픽셀에 도달할 때까지 줄어들기 시작하는 것을 볼 수 있습니다.

 

 

 

 

 

---

시동 시 높이 조정

 

기본적으로 자동 크기 조절 기능이 활성화되면 편집기는 포커스가 맞춰지면 높이가 조절되므로, 해당 편집기가 포함된 페이지가 부분적으로 다시 그려집니다. 그러나 CKEDITOR.config.autoGow_onStartup 옵션을 사용하여 편집기가 생성되는 순간, 즉 페이지 시작 시 크기가 커지도록 설정하면 이러한 동작을 방지할 수 있습니다.

# config 파일 추가 시
config.autoGrow_onStartup = true;

 

해당 설정을 통해서 콘텐츠를 수정하기 전까지는 페이지를 다시 그릴 필요가 없습니다.

 

 

 

 

 

스타일 미세 조정

 

CKEDITOR.config.autoGow_bottomSpace 옵션을 추가 하면 콘텐츠와 편집기 하단 막대 사이에 항상 추가되는 공간을 삽입할 수 있습니다. 예를 들어, 편집기가 너무 좁아 보이는 것을 방지하려면 50픽셀로 설정할 수 있습니다.

 

# config 파일 추가 시
config.autoGrow_bottomSpace = 50;

 

이 설정을 적용하면 콘텐츠 아래 50픽셀 높이의 공간이 항상 유지됩니다. 

 

 

 

 

 

---

적용하기

 

온라인 빌더를 이용한 방법

 

1.  CKEditor4 온라인 빌더에 접속합니다.

 

 

온라인 빌더 접속

CKEditor 4 online builder

 

 

 

 

 

2.  플러그인 항목에서 'Auto Grow'를 검색 후, 'Selected plugins' 항목으로 이동합니다.

 

 

 

 

 

 

3.  그 이후, 플러그인이 적용된 CKEditor4 라이브러리를 다운로드 받아 적용해주세요. 

 

CKEditor4 적용 하기

스프링(Spring)부트 & 스프링 프레임워크를 활용한 CKEditor4 적용하기

 

OS(Open Source) 버전의 .zip 파일을 다운로드 받고 적용하는 방법은 이전 게시글 중, 적용방법에 대해서 작성한 게시글로 대체하도록 하겠습니다. 

 

 

 

 

 

4.  CKEditor4 편집기를 적용할 페이지의 스크립트를 작성해주세요.

 

<script type="text/javascript">
$(function(){
	CKEDITOR.replace("boContent", {
		extraPlugins: 'autogrow',
		autoGrow_minHeight: 200,
		autoGrow_maxHeight: 400,
		autoGrow_bottomSpace: 50,
		removePlugins: 'resize'
	});
});
</script>

 

CKEditor4 예시로 최소 기본값은 200픽셀로 설정하고, 최대 높이 길이는 400픽셀로 설정하였습니다. 텍스트가 입력되서 400픽셀이 넘어가게 되면 자동 스크롤바가 생깁니다. 그리고 내용 본문의 아래 공간의 50픽셀만큼의 공간을 계속 붙여넣을 수 있도록 설정하였습니다.

 

 

 

 

 

5.  적용된 모습을 확인합니다.

 

 

기본 사이즈 200 픽셀 안에서 게시글을 작성할 때 서서히 높이의 길이가 길어지면서 텍스트가 추가됩니다. 이때, 아래 공간의 50픽셀 영역은 비어있는 공간으로 할당된 모습을 확인할 수 있습니다.

 

 

그리고, 적정 최대 높이인 400픽셀이 넘어가면 편집기에 스크롤바가 생겨 아래로 점차 스크롤이 이동하면서 텍스트가 작성되는 모습을 확인할 수 있습니다.

 

 

 

 

 

@Junesker

---