[javascript] TinyMCE에서 텍스트 에디터에서 텍스트를 모바일 장치에 맞게 자동으로 조정하는 방법은?

24 Nov 2023

javascript

텍스트 편집기를 모바일 장치에 맞게 자동으로 조정하려면 다음과 같은 단계를 따를 수 있습니다:

TinyMCE를 다운로드하고 프로젝트에 import합니다.

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js"></script>

텍스트 편집기를 생성하고 설정 옵션 중 하나로 ‘autoresize’ 플러그인을 추가합니다.
```
tinymce.init({
  selector: 'textarea',
  plugins: 'autoresize'
});
```
‘autoresize’ 플러그인을 활성화하면 편집기가 자동으로 모바일 장치의 화면 크기에 맞게 조정됩니다. 이를 위해 ‘autoresize_min_height’와 ‘autoresize_max_height’ 옵션을 설정해주어야 합니다.
```
tinymce.init({
  selector: 'textarea',
  plugins: 'autoresize',
  autoresize_min_height: 200,
  autoresize_max_height: 400
});
```

위의 예제 코드에서 ‘textarea’는 편집기의 대상이 되는 HTML 요소의 선택자(selector)입니다. ‘autoresize_min_height’와 ‘autoresize_max_height’는 각각 편집기가 가질 수 있는 최소 높이와 최대 높이를 지정합니다. 이 값들은 필요에 따라 조정하여 사용하면 됩니다.

위의 코드를 적용하면, TinyMCE의 텍스트 편집기가 모바일 장치의 크기에 맞게 자동으로 조정됩니다.

참고 문서:

TinyMCE - Autoresize plugin