[javascript] TinyMCE에서 텍스트 에디터에서 텍스트를 우클릭하여 컨텍스트 메뉴를 표시하는 방법은?

24 Nov 2023

javascript

TinyMCE에서 컨텍스트 메뉴를 표시하려면 “contextmenu” 이벤트를 사용해야 합니다. 이 이벤트는 마우스 우클릭이 발생했을 때 실행됩니다. TinyMCE에서 “contextmenu” 이벤트를 사용하려면 다음 단계를 따르십시오.

먼저, TinyMCE를 초기화해야 합니다. 이를 위해 tinymce.init 함수를 사용합니다. 초기화 과정에서 “contextmenu” 이벤트 처리기를 등록합니다.

tinymce.init({
  selector: '#myTextarea',
  setup: function (editor) {
    editor.on('contextmenu', function (e) {
      // 컨텍스트 메뉴를 표시하는 코드를 여기에 작성하세요.
    });
  }
});

이제 “contextmenu” 이벤트 처리기 함수 내에서 컨텍스트 메뉴를 표시할 수 있습니다. 이 작업을 위해 일반적으로 원하는 컨텍스트 메뉴를 생성하고 표시하는 코드를 작성해야 합니다. 예를 들어, ContextMenu.js 라이브러리를 사용하여 컨텍스트 메뉴를 만들고 표시할 수 있습니다.

editor.on('contextmenu', function (e) {
  e.preventDefault(); // 기본 컨텍스트 메뉴가 표시되지 않도록 기본 이벤트를 막습니다.

  // 원하는 컨텍스트 메뉴를 생성하고 표시하는 코드를 작성하세요.

  var contextMenu = new ContextMenu();
  contextMenu.addItem('Copy', function () {
    // 복사 동작을 수행하는 코드 작성
  });

  contextMenu.addItem('Cut', function () {
    // 잘라내기 동작을 수행하는 코드 작성
  });

  contextMenu.addItem('Paste', function () {
    // 붙여넣기 동작을 수행하는 코드 작성
  });

  contextMenu.display(e.clientX, e.clientY);
});

위의 예시 코드에서 ContextMenu.js는 컨텍스트 메뉴 생성 및 표시를 담당하는 외부 라이브러리입니다. 이 라이브러리를 사용할 수도 있고, 직접 컨텍스트 메뉴를 생성하는 코드를 작성할 수도 있습니다.

TinyMCE에서 마우스 우클릭으로 컨텍스트 메뉴를 표시하는 방법에 대해 알아보았습니다. 이를 통해 사용자가 간편하게 텍스트 에디터를 사용할 수 있도록 도움이 되었기를 바랍니다.