1. TinyMCE 라이브러리를 다운로드하고 웹 페이지의 경로에 추가합니다.

   <script src="path/to/tinymce.min.js"></script>
   

2. <textarea> 태그를 텍스트 에디터로 변경합니다.

   <textarea id="myTextarea"></textarea>
   

3. JavaScript를 사용하여 TinyMCE를 초기화하고 워드프로세서 기능을 추가합니다.

   tinymce.init({
     selector: '#myTextarea',
     plugins: 'advlist autolink lists link image charmap print preview anchor',
     toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | link image',
     menubar: 'file edit view insert format tools',
     content_style: 'body { font-family: Arial, sans-serif; font-size: 14px }'
   });
   

위의 코드에서 중요한 옵션은 plugins, toolbar, menubar, content_style입니다.

• plugins: 사용할 플러그인을 지정합니다. 워드프로세서 기능을 사용하기 위해 advlist, autolink, lists, link, image, charmap 플러그인을 추가했습니다.
• toolbar: 툴바에 표시할 버튼을 지정합니다. 이 예제에서는 텍스트 스타일, 정렬, 목록, 링크, 이미지 관련 버튼을 추가했습니다.
• menubar: 메뉴 바에 표시할 항목을 지정합니다. 이 예제에서는 file, edit, view, insert, format, tools 항목을 추가했습니다.
• content_style: 에디터의 내용을 표시하는 스타일을 지정합니다.

TinyMCE를 사용하여 텍스트 에디터에 워드프로세서 기능을 추가하는 방법은 간단합니다. 위의 코드를 참조하여 원하는 기능을 추가하고 에디터를 커스터마이징할 수 있습니다.

더 자세한 내용은 TinyMCE 공식 문서를 참고하세요.