CKEditor4 편집기 크기 조정

CKEditor4 편집기를 이용하다보면 기본적으로 설정되어 있는 높이가 생각보다 작아서 편집기를 활용하는데에 있어서 불편함을 느낀 경험이 있을겁니다. 편집기의 편집 높이 영역이 작을 수록 에디터를 통해서 글 작성하는데에 많은 불편함과 답답함이 있을텐데요. 그런 부분을 개선할 수 있도록 CKEditor4는 편집기 크기를 조정할 수 있는 설정 정보를 제공하고 있습니다.

편집기 크기 조정

CKEditor4 편집기는 클래식 편집기에서만 수정이 가능합니다. 에디터 config 파일 내에서 수정을 진행한다면 config.width, config.height 설정을 통해서 크기를 조정할 수 있습니다. 하지만, CKEditor4 인라인 편집기에서는 해당 설정이 무시됩니다.

클래식 편집기의 너비와 높이는 해당 컨텍스트 및 예상 용도에 맞게 사용자 지정으로 설정할 수 있습니다. 기본적으로 편집기 너비는 페이지 내 컨테이너 요소의 너비와 동일하며, 높이는 200px로 설정됩니다. 그리고 편집기의 크기 조정은 다음과 같은 경우라면 기본값을 그대로 이용하는게 아닌 사용자 지정에 맞게 변경하는 것이 좋습니다.

편집자는 매우 짧은(또는 매우 긴) 텍스트를 제출해야 할 때
편집기가 너무 많은 공간을 차지하여 시각적으로 페이지를 지배하는 것을 원하지 않을 때
도구 모음을 사용자 지정하여 일부 버튼을 제거한 후, 편집기 너비를 줄어든 도구 모음에 맞게 조정하려 할 때
편집기 UI를 페이지 레이아웃에 맞게 조정해야 할 때

해당 상황에 맞춰 설정을 진행하기 위한 가장 쉬운 방법은 아래 설정을 통해 편집기 사용자 인터페이스 크기를 조정할 수 있습니다.

CKEDITOR.config.width
CKEDITOR.config.height

편집기 너비

CKEditor4 편집기 너비를 설정하기 위해서는 'CKEDITOR.config.width' 옵션으로 테두리를 포함한 전체 편집기 인터페이스의 외부 크기를 설정할 수 있습니다. 해당 설정 옵션은 정수(픽셀 단위의 값) 또는 CSS에서 정의한 길이 단위(퍼센트)를 허용합니다.

config.width = 500; // 500 pixels wide.
config.width = '75%'; // CSS unit (percent).

편집기 높이

CKEditor4 편집기 높이를 설정하기 위해서는 'CKEDITOR.config.heigth' 옵션으로 컨텐츠가 있는 편집 영역의 높이를 설정할 수 있습니다. 툴바나 하단 바는 여기에 포함되지 않습니다. 해당 옵션은 정수(픽셀 단위의 값) 또는 CSS에서 정의한 길이 단위를 사용할 수 있습니다. 단, 퍼센트 값은 지원되지 않습니다.

config.height = 500; // 500 pixels high.
config.height = '25em'; // CSS unit (em).

대안 솔루션

편집기를 통해서 작성한 게시글 정보에 따른 크기 조정에 어려움이 있다면 대안으로 자동 크기를 조정할 수 있는 설정도 가능할것입니다. 옵션인 자동 크기 조절 플러그인을 사용하면 편집기의 높이가 편집 영역에 입력된 콘텐츠 크기에 맞춰 자동으로 조절되도록 구성할 수 있습니다. 또한 Editor Resize 폴러그인은 클래식 편집기에 다양한 크기 조절 옵션을 제공합니다. 수동 크기 조절 핸들, 크기 조절 후 최소 및 최대 편집기 크기 설정, 크기 조절 방향 변경 등이 포함됩니다. 그리고 편집기 크기를 바로 변경할 수도 있습니다.

Get Sample Source Code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Setting editor size</title>
  <script src="https://cdn.ckeditor.com/4.25.1-lts/standard-all/ckeditor.js"></script>
</head>
<body>
  <textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
  <script>
    CKEDITOR.replace('editor1', {
      width: '70%',
      height: 500
    });
  </script>
</body>
</html>

@Junesker

저작자표시 (새창열림)

'OPEN SOURCE > CKEditor4' 카테고리의 다른 글

CKEditor4 편집기 크기 조정 사용자 정의 (0)	2025.04.24
CKEditor4 편집기 자동 확장 (0)	2025.04.15
CKEditor4 사용자 인터페이스 UI 색상 및 언어 설정, 자리 표시자 (0)	2025.04.04
스프링(Spring)부트 & 스프링 프레임워크를 활용한 CKEditor4 적용하기 (0)	2025.04.02
CKEditor란? (2)	2025.04.01

편집기 크기 조정

편집기 너비

편집기 높이

대안 솔루션

Get Sample Source Code

'OPEN SOURCE > CKEditor4' 카테고리의 다른 글

티스토리툴바