[javascript] TinyMCE에서 텍스트 에디터에서 드래그 앤 드롭을 사용하는 방법은?

24 Nov 2023

javascript

1. 드래그 앤 드롭 API 활성화하기 드래그 앤 드롭 API를 활성화하기 위해 drag_drop 플러그인을 TinyMCE에 추가해야합니다.

tinymce.init({
  selector: '#myTextarea',
  plugins: 'dragdrop',
});

2. 드롭 이벤트 핸들러 추가하기 드롭 이벤트를 처리하기 위해 커스텀 드롭 이벤트 핸들러를 작성해야합니다. 이 핸들러는 드롭된 파일이나 이미지를 처리하는 코드를 포함해야합니다.

tinymce.init({
  selector: '#myTextarea',
  plugins: 'dragdrop',
  setup: function (editor) {
    editor.on('dragdrop', function (event) {
      // 드롭 이벤트 처리 로직 작성
      console.log('드롭 이벤트 발생');
      console.log('드롭된 파일:', event.data);
    });
  },
});

위의 예제에서는 드래그 앤 드롭 이벤트가 발생하면 콘솔에 간단한 메시지와 드롭된 파일을 출력합니다.

3. 커스텀 드롭 이벤트 처리하기 실제로 드롭된 파일을 처리하기 위해서는 드롭 이벤트 핸들러에서 해당 코드를 작성해야합니다. 예를 들어, 드롭된 파일을 업로드하고 삽입하는 방법을 보여드리겠습니다.

tinymce.init({
  selector: '#myTextarea',
  plugins: 'dragdrop',
  setup: function (editor) {
    editor.on('dragdrop', function (event) {
      var files = event.dataTransfer.files;

      // 파일 업로드 로직 작성
      var formData = new FormData();
      formData.append('file', files[0]);

      fetch('/upload', {
        method: 'POST',
        body: formData,
      })
        .then(function (response) {
          return response.json();
        })
        .then(function (data) {
          // 업로드된 파일을 삽입
          editor.insertContent('<img src="' + data.url + '">');
        });
    });
  },
});

위의 예제에서는 드롭된 파일을 서버로 업로드하고, 업로드된 파일의 URL을 에디터에 삽입합니다.

드래그 앤 드롭을 사용하여 TinyMCE에서 텍스트 에디터를 확장할 수 있습니다. 위의 단계를 따라하면 사용자가 텍스트 에디터로 파일이나 이미지를 간편하게 드래그 앤 드롭 할 수 있습니다.