MediumEditor는 HTML 텍스트 편집기로 링크를 삽입하는 기능을 제공합니다. 이 기능을 사용하여 텍스트에 링크를 추가하면, 해당 링크를 클릭할 때 원하는 동작을 수행할 수 있습니다.

여기에서는 MediumEditor에서 텍스트 링크를 클릭했을 때 이벤트를 처리하는 방법에 대해 알아보겠습니다.

이벤트 리스너 등록하기

텍스트 링크를 클릭하면 발생하는 이벤트를 처리하기 위해 MediumEditor에서는 editableClick 이벤트를 제공합니다. 이 이벤트를 사용하여 클릭 이벤트를 감지하고 원하는 동작을 수행할 수 있습니다.

먼저 MediumEditor를 초기화한 후, editableClick 이벤트에 대한 이벤트 리스너를 등록해야 합니다. 다음 예제 코드에서는 이벤트 리스너 함수를 handleLinkClick으로 정의하고, editableClick 이벤트에 등록하는 방법을 보여줍니다.

var editor = new MediumEditor('.editable');
var editableElement = document.querySelector('.editable');

editableElement.addEventListener('editableClick', handleLinkClick);

function handleLinkClick(event) {
  var target = event.target;

  // 클릭된 요소가 링크인지 확인
  if (target.nodeName === 'A') {
    // 링크 클릭 이벤트 처리
    console.log('링크가 클릭되었습니다:', target.href);
    // 여기에 링크 클릭 시 수행할 동작을 추가하세요
  }
}

위 코드에서 handleLinkClick 함수는 클릭된 요소가 링크인지 확인하고, 맞다면 해당 링크와 관련된 동작을 수행합니다. 이 부분에 원하는 동작을 추가하여 사용하면 됩니다.

예외 상황 처리하기

텍스트 내에 여러 개의 요소가 있을 때, 클릭된 요소가 실제 링크인지 확인해야 합니다. 이 경우 event.target의 nodeName 속성을 이용하여 요소의 태그 이름을 확인할 수 있습니다.

하지만 MediumEditor에서는 텍스트 링크 이외의 다른 요소에도 클릭 이벤트가 발생할 수 있기 때문에, 예외 상황에 대한 처리도 고려해야 합니다. 이를 위해 nodeName 이외에도 다른 속성들을 활용하여 추가적인 검사를 진행할 수 있습니다.

마무리

MediumEditor에서 텍스트 링크를 클릭하면 발생하는 이벤트를 처리하기 위해 editableClick 이벤트와 이벤트 리스너를 사용할 수 있습니다. 예외 상황에 대한 처리도 항상 고려해야 하며, 클릭된 요소가 실제 링크인지 확인하는 작업이 필요합니다. 이를 통해 MediumEditor를 활용하여 텍스트 링크 클릭 이벤트를 처리할 수 있습니다.