CKEditor4 편집기 크기 조정 사용자 정의

 

CKEditor 크기를 사용자 정의에 맞춰 가로,세로로 조정하거나 가로로만 조정하거나 세로로만 조정할 수 있습니다. 최소 및 최대 크기를 설정하여 사용자 정의에 맞춰 조정을 할 수도 있고 크기 조절에 대한 설정을 비활성화 할 수 있습니다. 그래서 이번 글에서는 CKEditor 크기를 사용자 정의에 맞춰 조정할 수 있는 방법에 대해서 알아보겠습니다.

 

 

 

 

 

편집기 크기 조정 및 사용자 정의

 

해당 기능은 CKEditor 4 공식 다운로드 사이트 에서 제공하는 Standard 및 Full 프리셋에 포함된 Editor Resize 플러그인을 통해 제공됩니다 . 온라인 빌더를 사용하여 사용자 정의 빌드에 추가 할 수도 있습니다 . 너비와 높이 조작은 클래식 편집기 에서만 지원되며 인라인 편집기 에서는 작동하지 않습니다.

 

편집기 크기 조정 플러그인을 활성화하면 편집기 사용자 인터페이스 하단에 크기 조정 핸들( ◢ ) 이 추가되고 사용자가 편집기 창의 크기를 원하는 크기로 직접 조정할 수 있습니다.

 

CKEditor4 조정 핸들

 

CKEditor를 textarea 태그에 얹어서 UI를 확인해보면 위 사진처럼 오른쪽 하단 모서리 부분에 조정 핸들( ◢ ) 이 보여집니다. 조정 핸들을 마우스를 이용해 클릭 후 드래그를 하면 가로, 세로로 원하는 크기에 맞춰 조정할 수 있습니다. 크기 조절 후 크기 조절 방향이나 최대 및 최소 편집기 크기를 정의할 수 있고, 해당 플러그인은 'CKEDITOR.editor_resize' 메소드를 제공하여 편집기 크기를 실시간으로 조절할 수 있습니다.

 

 

 

 

 

편집기 크기 조정 비활성화

 

편집기 크기가 조정되는 것을 방지하려면 'CKEDITOR.config.removePlugins' 설정을 사용하여 편집기 크기 조정(resize) 플러그인을 제거할 수 있습니다.

# config 파일로 설정 시
config.removePlugins = 'resize';

 

'CKEDITOR.config.resize_enabled' 구성 옵션을 설정하여 해당 기능을 비활성화할 수도 있습니다. 

# config 파일로 설정 시
config.resize_enabled = false;

 

config 파일을 이용하지 않고, 스크립트로 설정한 replace 구문에서도 편집기 크기 조정을 비활성화 할 수 있습니다.

# CKEDITOR replace 구문으로 설정 시
CKEDITOR.replace("boContent", {
    removePlugins: 'resize'
});

or

CKEDITOR.replace("boContent", {
    resize_enabled : false
});

 

 

 

 

 

편집기 크기 즉시 변경

 

편집기 창의 기본 크기를 정의하는 것 외에도 CKEditor 4 인스턴스의 크기를 즉시 변경할 수도 있습니다. 이를 달성하려면 editor.resize() 메소드를 사용하여 편집기 인터페이스의 크기를 정의하고 창에 픽셀이나 CSS에서 허용하는 단위의 너비와 높이 값을 지정합니다. editor.resize( 'width', 'height', 'isContentHeight', 'resizeInner' )의 형태를 가지고 사용할 수 있습니다.

// Set editor width to 100% and height to 350px.
editor.resize( '100%', '350' );

 

높이 값을 설정할 때 isContentHeight매개변수를 사용하여 값이 전체 편집기 인터페이스에 적용되는지 아니면 편집 영역에만 적용되는지 결정합니다.

// The height value now applies to the editing area.
editor.resize( '100%', '350', true );

 

# editor.resize()

매개변수
width (Number, String)
- 새로운 너비입니다. 픽셀 단위는 단위의 값을 나타내는 정수이거나, 단위가 있는 CSS 크기 값일 수 있습니다.
  null이 전달되면 값이 설정되지 않습니다.

height (Number, String)
- 새로운 높이입니다. 픽셀 단위의 정수이거나 단위가 있는 CSS 크기 값일 수 있습니다.

isContentHeight (Boolean)
- 제공된 높이가 전체 편집기 인터페이스가 아닌 편집기 콘텐츠 영역에 적용됨을 나타냅니다. 
  기본값은 'false'입니다.

resizeInner (Boolean)
- 크기를 조정해야 하는 요소가 외부 요소가 아니라 내부 인터페이스 요소임을 나타냅니다.

 

 

 

 

 

CKEditor 4 크기 조정의 너비 및 높이 제한

 

편집기 창이 너무 작아지거나 너무 커져서 처리할 수 없게 되는 것을 방지하기 위해 크기 조절 후 최소 및 최대 크기를 정의할 수도 있습니다. 크기 조정 후 최소 편집기 크기를 정의하려면 'config.resize_minWidth' 및 'config.resize_minHeight' 값을 픽셀 단위로 지정합니다.

# config 파일에서 설정 시
config.resize_minWidth = 300;
config.resize_minHeight = 300;

 

크기 조정 후 편집기의 최대 크기를 정의하려면 config.resize_maxWidth 및 config.resize_maxHeight 값을 픽셀 단위로 지정합니다.

# config 파일에서 설정 시
config.resize_maxWidth = 800;
config.resize_maxHeight = 600;

 

config 파일을 이용하지 않고, 스크립트로 설정한 replace 구문에서도 편집기 최소 및 최대 크기를 정의할 수 있습니다.

# CKEDITOR replace 구문으로 설정 시
CKEDITOR.replace("boContent", {
    resize_minWidth: 100,
    resize_maxWidth: 200,
    resize_minHeight: 300,
    resize_maxHeight: 600
});

 

위 replace 구문 설정은 크기 조정 핸들을 이용 시, 설정된 최소, 최대 width 값 그리고 최소,최대 height 값을 설정할 때 사용한다는점을 꼭 염두에 둬야합니다. 기본적인 에디터 크기가 바로 적용되는게 아니라 크기를 조정하기 위한 핸들을 사용 시 설정된 크기 내에서만 크기를 조정할 수 있다는 특징이 있습니다.

 

 

 

 

 

크기 조정 방향 제한

 

편집기의 결과 모양을 보다 세부적으로 제어하기 위해 크기 조절 방향을 정의할 수 있습니다. 기본적으로 CKEditor는 세로 방향으로만 크기 조절이 가능합니다. 해당 설정은 config.resize_dir 설정 옵션을 통해 설정이 가능합니다.

# config 파일 내 설정 시
// 세로 방향으로만 크기 조절 가능
config.resize_dir = 'vertical';

// 가로 방향으로만 크기 조절 가능
config.resize_dir = 'horizontal';

// 수직 및 수평 크기 조정을 모두 허용
config.resize_dir = 'both';

 

config 파일을 이용하지 않고, 스크립트로 설정한 replace 구문에서도 편집기 최소 및 최대 크기를 정의할 수 있습니다.

 

# CKEDITOR replace 구문으로 설정 시
CKEDITOR.replace("boContent", {
	width: 600,
	height: 300,
	resize_dir: 'both',
	resize_minWidth: 200,
	resize_minHeight: 300,
	resize_maxWidth: 800
});

 

 

 

 

 

 

@Junesker

---