[javascript] TinyMCE에서 텍스트 에디터에서 줄바꿈 및 들여쓰기 기능을 추가하는 방법은?

24 Nov 2023

javascript

TinyMCE는 대표적인 오픈 소스 WYSIWYG(What You See Is What You Get) 에디터입니다. 이 에디터를 사용하여 텍스트를 입력하고 편집할 수 있습니다. 줄바꿈 및 들여쓰기 기능을 추가하기 위해 아래의 단계를 따라하세요:

TinyMCE를 웹 프로젝트에 추가합니다. 먼저 필요한 스크립트 및 스타일시트를 HTML 파일에 추가합니다. 예를 들면:

<!DOCTYPE html>
<html>
<head>
    <script src="tinymce.min.js"></script>
    <script>
        tinymce.init({
            selector: 'textarea'
        });
    </script>
</head>
<body>
    <textarea></textarea>
</body>
</html>

줄바꿈을 사용하려면 forced_root_block 속성을 설정해야 합니다. forced_root_block은 HTML 텍스트에 기본 블록 요소를 강제적으로 추가하도록 지정합니다. 이렇게 하면 줄바꿈이 제대로 표시됩니다. 아래의 코드를 사용하여 forced_root_block 속성을 설정할 수 있습니다:

tinymce.init({
    selector: 'textarea',
    forced_root_block: 'div'
});

들여쓰기 기능을 사용하려면 indent 플러그인을 추가해야 합니다. indent 플러그인은 들여쓰기 및 내어쓰기를 쉽게 할 수 있도록 합니다. 아래의 코드를 사용하여 indent 플러그인을 추가합니다:

tinymce.init({
    selector: 'textarea',
    plugins: 'indent',
    toolbar: 'indent outdent'
});

이제 줄바꿈과 들여쓰기 기능이 TinyMCE 텍스트 에디터에 추가되었습니다. 원하는대로 줄바꿈을 하고 들여쓰기를 할 수 있습니다.

더 자세한 정보는 TinyMCE 공식 문서를 참조하시기 바랍니다.

참고 자료: