TinyMCE는 많은 기능을 가진 강력한 텍스트 에디터입니다. 외부 링크를 표시하기 위해서는 TinyMCE의 링크 플러그인을 사용할 수 있습니다.

먼저, TinyMCE를 웹 페이지에 추가하고 텍스트 에디터를 초기화해야 합니다. 다음은 TinyMCE를 초기화하는 예시 코드입니다.

tinymce.init({
  selector: 'textarea',
  plugins: ['link']
})

위의 코드에서 selector는 TinyMCE 텍스트 에디터를 적용할 대상 요소의 선택자입니다. textarea로 설정하면 <textarea> 요소에 TinyMCE가 적용됩니다. plugins 배열에 link를 추가하여 링크 플러그인을 로드합니다.

이제 텍스트 에디터에 링크를 추가하는 방법을 알아보겠습니다. TinyMCE의 기본 동작에서는 사용자가 링크를 추가할 때 대화 상자가 열립니다. 하지만 편의를 위해 자동으로 외부 링크를 추가할 수 있도록 설정할 수 있습니다. 다음은 그 예시입니다.

tinymce.init({
  selector: 'textarea',
  plugins: ['link'],
  setup: function (editor) {
    editor.on('BeforeSetContent', function (e) {
      e.content = e.content.replace(/<a href="https?:\/\/[\w\-\.]+\.\w{2,}.*?">([\s\S]*?)<\/a>/g, function (match, text) {
        return '<a href="' + match + '" target="_blank">' + text + '</a>';
      });
    });
  }
})

위의 코드에서 setup 함수는 초기화 후 실행되는 콜백 함수입니다. editor.on으로 BeforeSetContent 이벤트를 정의하여 링크가 추가되기 전에 실행되는 동작을 설정합니다. 정규식을 사용하여 링크가 외부 링크인지 확인하고, target="_blank" 속성을 추가하여 링크가 새 탭에서 열리도록 합니다.

이제 TinyMCE를 사용하여 텍스트 에디터에서 외부 링크를 표시할 수 있습니다. 자세한 내용은 TinyMCE 공식 문서를 참조하시기 바랍니다.

• TinyMCE 공식 문서
• TinyMCE 링크 플러그인 문서