MediumEditor는 웹에서 텍스트 편집을 제공하는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 웹 애플리케이션에서 Rich Text Editor를 구현할 수 있습니다.

이번 글에서는 MediumEditor를 사용하여 콘텐츠를 이동하거나 삭제하는 방법을 알아보겠습니다.

콘텐츠 이동하기

MediumEditor는 콘텐츠를 드래그 앤 드롭하여 이동할 수 있는 기능을 제공합니다. 먼저, MediumEditor를 초기화하고 콘텐츠를 추가한 후에 다음과 같이 드래그 앤 드롭 이벤트를 처리할 수 있습니다.

var editor = new MediumEditor('.editable');

// 이벤트 핸들러 등록
editor.subscribe('editableDrag', function(event, editable) {
  // 드래그 앤 드롭 시작 시 호출되는 함수
  // 여기에서 이동할 콘텐츠의 위치를 저장하거나, 스타일을 변경할 수 있습니다.
});

editor.subscribe('editableDrop', function(event, editable) {
  // 드래그 앤 드롭이 완료되었을 때 호출되는 함수
  // 여기에서 이동된 콘텐츠의 위치를 가져와서 적용할 수 있습니다.
});

위 예제에서는 editableDrag와 editableDrop 이벤트를 처리하여 콘텐츠의 이동을 관리하고 있습니다. 드래그 앤 드롭 시작 시에는 editableDrag 이벤트 핸들러가 호출되고, 드롭이 완료되면 editableDrop 이벤트 핸들러가 호출됩니다.

콘텐츠 삭제하기

MediumEditor는 콘텐츠를 삭제하는 기능도 제공합니다. 사용자가 콘텐츠를 선택하고 삭제 버튼을 클릭하면 해당 콘텐츠가 삭제되도록 구현할 수 있습니다.

var editor = new MediumEditor('.editable');

// 삭제 버튼 클릭 이벤트 핸들러 등록
document.getElementById('delete-button').addEventListener('click', function() {
  var selectedText = window.getSelection().toString();
  editor.getSelectedParentElement().remove();
});

위 예제에서는 delete-button 아이디를 가진 요소가 클릭되었을 때, 현재 선택된 텍스트를 가져와서 해당 요소를 삭제하고 있습니다. getSelectedParentElement() 메소드를 사용하여 선택된 요소의 부모 요소를 가져옵니다.

MediumEditor를 사용하여 콘텐츠를 이동하거나 삭제하는 방법을 알아보았습니다. 이러한 기능을 추가하여 사용자 친화적인 Rich Text Editor를 구현할 수 있습니다.