=======================================================================================

이제 많은 웹 애플리케이션에서 텍스트 편집기로 TinyMCE를 사용하고 있습니다. TinyMCE는 사용자가 텍스트를 편집할 때 풍부한 편집 기능을 제공합니다.

HTML은 웹 페이지의 내용을 구조화하고 표현하기 위한 표준 마크업 언어입니다. 때로는 사용자가 TinyMCE 편집기에서 작성한 텍스트를 HTML로 변환해야 할 수도 있습니다. 아래에는 TinyMCE에서 텍스트 편집기에 입력된 내용을 HTML로 자동 변환하는 방법을 보여주는 예제 코드가 있습니다.

// TinyMCE 초기화
tinymce.init({
  selector: '#editor',
  plugins: 'code',
  toolbar: 'code',
  setup: function (editor) {
    // 텍스트 편집 완료 이벤트 리스너
    editor.on('keyup', function (e) {
      // TinyMCE 에디터 내의 텍스트 가져오기
      var content = editor.getContent();

      // 텍스트를 HTML로 변환
      var htmlContent = '<pre>' + content + '</pre>';

      // 변환된 HTML을 다시 TinyMCE 에디터로 설정
      var contentToSet = '<code>' + htmlContent + '</code>';
      editor.setContent(contentToSet);
    });
  }
});

위의 예제 코드는 TinyMCE 편집기를 초기화하고, 사용자가 텍스트를 편집한 후에 keyup 이벤트가 발생할 때마다 텍스트를 HTML로 변환하는 로직을 포함하고 있습니다.

예제 코드에서는 selector에 편집기의 ID를 설정하고, plugins 및 toolbar에는 필요한 플러그인 및 툴바를 설정합니다. setup 함수에서는 keyup 이벤트 리스너를 등록하고, 텍스트를 HTML로 변환한 다음 변환된 내용을 다시 TinyMCE 에디터로 설정합니다.

이 예제 코드를 사용하면 TinyMCE에서 작성한 텍스트를 HTML로 변환하여 편집기에 표시할 수 있습니다.

참고 자료:

• TinyMCE 공식 문서
• TinyMCE 플러그인 목록