[javascript] MediumEditor에서 에디터 툴바 버튼에 드래그 앤 드롭 기능 추가하기

30 Nov 2023

javascript

MediumEditor는 사용자가 간편하게 텍스트 편집을 할 수 있는 에디터 라이브러리입니다. 이 라이브러리는 에디터 툴바를 통해 다양한 편집 기능을 제공합니다. 하지만 기본적으로는 드래그 앤 드롭 기능이 없어, 텍스트나 이미지를 쉽게 이동시키기 어렵습니다.

이번 블로그에서는 MediumEditor 에디터 툴바 버튼에 드래그 앤 드롭 기능을 추가하는 방법을 알아보겠습니다.

1. MediumEditor 설치하기

먼저 MediumEditor를 설치해야 합니다. 아래의 커맨드를 사용하여 npm을 통해 설치할 수 있습니다.

npm install medium-editor

2. 드래그 앤 드롭 기능 추가하기

드래그 앤 드롭 기능을 추가하기 위해서는 MediumEditor의 버튼 클릭 이벤트를 활용해야 합니다. 해당 이벤트를 캡처하여 드래그 앤 드롭 동작을 구현할 수 있습니다.

var editor = new MediumEditor('.editable', {
  toolbar: {
    buttons: ['bold', 'italic', 'dragAndDrop'] // 드래그 앤 드롭 버튼 추가
  },
  extensions: {
    dragAndDrop: new MediumEditor.DragAndDropExtension() // 드래그 앤 드롭 확장 기능 추가
  }
});

// 드래그 앤 드롭 버튼 클릭 이벤트
editor.subscribe('clickToolbar', function(event, buttonClicked) {
  if (buttonClicked === 'dragAndDrop') {
    // 드래그 앤 드롭 동작 구현
    // ...
  }
});

3. 드래그 앤 드롭 구현하기

드래그 앤 드롭 기능을 구현하기 위해서는 해당 기능을 처리하는 JavaScript 코드를 작성해야 합니다. 이 코드에서는 사용자가 드래그 앤 드롭을 통해 원하는 위치로 텍스트나 이미지를 이동시킬 수 있습니다.

// 드래그 앤 드롭 동작 구현
function handleDragAndDrop(event) {
  // 드래그 앤 드롭 처리 로직 작성
  // ...
}

// 드래그 앤 드롭 요소를 선택하여 해당 요소에 이벤트 리스너 추가
var dragAndDropElement = document.getElementById('dragAndDropElement');
dragAndDropElement.addEventListener('dragstart', handleDragAndDrop);
dragAndDropElement.addEventListener('dragend', handleDragAndDrop);

이제 MediumEditor 에디터 툴바에 드래그 앤 드롭 기능을 추가하고, 해당 기능을 구현하는 JavaScript 코드를 작성하는 방법을 알았습니다. 이를 통해 사용자들은 더 편리하게 내용을 편집하고 이동시킬 수 있게 될 것입니다.

참고 자료: