[javascript] 콘텍스트 메뉴를 사용한 텍스트 에디터 구현하기

11 Dec 2023

javascript

이번 블로그에서는 웹 애플리케이션에서 콘텍스트 메뉴를 사용하여 텍스트 에디터를 구현하는 방법에 대해 알아보겠습니다.

콘텍스트 메뉴는 마우스 오른쪽 버튼을 클릭했을 때 나타나는 메뉴로, 웹 애플리케이션에서 다양한 기능을 구현할 수 있는데 사용됩니다.

1. HTML 및 CSS 설정

먼저 HTML 파일을 생성하고, 텍스트 에디터를 구현하기 위한 필수 요소를 추가합니다.

<textarea id="editor"></textarea>

<div id="context-menu">
  <ul>
    <li id="cut">Cut</li>
    <li id="copy">Copy</li>
    <li id="paste">Paste</li>
  </ul>
</div>

그리고 필요한 CSS를 추가하여 콘텍스트 메뉴의 스타일을 정의합니다.

#context-menu {
  display: none;
  position: absolute;
  background: #f1f1f1;
  border: 1px solid #ccc;
  padding: 5px 0;
  list-style: none;
  z-index: 100;
}

#context-menu ul li {
  padding: 5px 20px;
  cursor: pointer;
}

#context-menu ul li:hover {
  background: #e4e4e4;
}

2. JavaScript로 콘텍스트 메뉴 구현

이제 JavaScript를 사용하여 콘텍스트 메뉴를 구현합니다.

const editor = document.getElementById('editor');
const contextMenu = document.getElementById('context-menu');

editor.addEventListener('contextmenu', function(e) {
  e.preventDefault();
  contextMenu.style.display = 'block';
  contextMenu.style.left = e.pageX + 'px';
  contextMenu.style.top = e.pageY + 'px';
});

document.addEventListener('click', function() {
  contextMenu.style.display = 'none';
});

document.getElementById('cut').addEventListener('click', function() {
  document.execCommand('cut');
  contextMenu.style.display = 'none';
});

document.getElementById('copy').addEventListener('click', function() {
  document.execCommand('copy');
  contextMenu.style.display = 'none';
});

document.getElementById('paste').addEventListener('click', function() {
  document.execCommand('paste');
  contextMenu.style.display = 'none';
});

3. 결과 확인 및 추가기능 구현

이제 웹 브라우저에서 HTML 파일을 열어 콘텍스트 메뉴를 사용한 텍스트 에디터를 확인할 수 있습니다. 만약에 추가적인 기능을 구현하고 싶다면, JavaScript를 사용하여 더 많은 기능을 추가할 수 있습니다.

위의 단계를 통해 콘텍스트 메뉴를 사용한 텍스트 에디터를 구현할 수 있습니다. 이를 통해 사용자들은 웹 애플리케이션에서 더 편리한 텍스트 편집 기능을 경험할 수 있을 것입니다.

그럼 이제 여러분이 자체 웹 애플리케이션에 콘텍스트 메뉴를 추가해보시기 바랍니다!

여기서 Document.execCommand의 자세한 정보를 확인할 수 있습니다.