[javascript] MediumEditor와 멀티 미디어 지원하기

30 Nov 2023

javascript

MediumEditor는 사용하기 쉬운 WYSIWYG (What You See Is What You Get) 에디터 라이브러리로, 웹 애플리케이션에서 텍스트 편집을 간편하게 할 수 있도록 지원합니다. 하지만 기본적으로는 텍스트만 편집이 가능하며, 이미지나 동영상과 같은 멀티미디어 요소를 지원하지 않습니다. 이번 글에서는 MediumEditor를 확장하여 멀티미디어 지원 기능을 추가하는 방법에 대해 알아보겠습니다.

멀티미디어 기능 추가하기

MediumEditor에 멀티미디어 기능을 추가하기 위해서는 먼저 멀티미디어 요소를 삽입할 수 있는 버튼을 에디터에 추가해야 합니다. 이는 MediumEditor의 확장 기능을 사용하여 구현할 수 있습니다. 아래는 이미지와 동영상을 삽입할 수 있는 버튼을 추가하는 예제 코드입니다.

var editor = new MediumEditor('.editable', {
  toolbar: {
    buttons: ['bold', 'italic', 'underline', 'image', 'video']
  },
  extensions: {
    image: new MediumEditor.extensions.image(),
    video: new MediumEditor.extensions.video()
  }
});

위 코드에서는 MediumEditor의 toolbar에 이미지와 동영상 버튼을 추가하고, 이미지와 동영상을 삽입할 수 있는 확장 기능을 등록하고 있습니다.

이미지 삽입 기능 구현하기

이미지 삽입 기능을 구현하기 위해서는 이미지를 업로드하고 삽입하는 기능을 추가해야 합니다. 이를 위해 MediumEditor의 extensions/image.js 파일을 수정하거나 커스텀 확장 기능을 만들어 사용할 수 있습니다. 아래는 이미지 삽입을 위한 커스텀 확장 기능의 예제 코드입니다.

var CustomImageExtension = MediumEditor.Extension.extend({
  name: 'image',
  init: function () {
    MediumEditor.Extension.prototype.init.apply(this, arguments);
    this.subscribe('editableClick', this.handleEditableClick.bind(this));
  },
  handleEditableClick: function () {
    var fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.accept = 'image/*';
    fileInput.addEventListener('change', this.handleFileSelect.bind(this), false);
    fileInput.click();
  },
  handleFileSelect: function (event) {
    var files = event.target.files;
    for (var i = 0, length = files.length; i < length; i++) {
      var file = files[i];
      var reader = new FileReader();
      reader.onload = this.handleFileLoad.bind(this, file);
      reader.readAsDataURL(file);
    }
  },
  handleFileLoad: function (file, event) {
    var img = document.createElement('img');
    img.src = event.target.result;
    this.base.insertHTML('<p><img src="' + img.src + '"></p>');
  }
});

var editor = new MediumEditor('.editable', {
  toolbar: {
    buttons: ['bold', 'italic', 'underline', 'image', 'video']
  },
  extensions: {
    image: new CustomImageExtension(),
    video: new MediumEditor.extensions.video()
  }
});

위 코드에서는 CustomImageExtension이라는 커스텀 확장 기능을 정의하고, editableClick 이벤트를 구독하여 사용자가 에디터를 클릭하면 이미지를 업로드할 수 있는 파일 선택 창을 표시합니다. 파일을 선택하면 handleFileSelect 메서드가 호출되어 선택한 이미지 파일을 읽고, handleFileLoad 메서드가 호출되어 이미지가 삽입됩니다.

동영상 삽입 기능 구현하기

동영상 삽입 기능도 이미지 삽입 기능과 비슷하게 구현할 수 있습니다. MediumEditor의 extensions/video.js 파일을 수정하거나 커스텀 확장 기능을 만들어 사용할 수 있습니다. 아래는 동영상 삽입을 위한 커스텀 확장 기능의 예제 코드입니다.

var CustomVideoExtension = MediumEditor.Extension.extend({
  name: 'video',
  init: function () {
    MediumEditor.Extension.prototype.init.apply(this, arguments);
    this.subscribe('editableClick', this.handleEditableClick.bind(this));
  },
  handleEditableClick: function () {
    var url = window.prompt('동영상 URL을 입력하세요.');
    if (url) {
      this.base.insertHTML('<p><iframe width="640" height="480" src="' + url + '"></iframe></p>');
    }
  }
});

var editor = new MediumEditor('.editable', {
  toolbar: {
    buttons: ['bold', 'italic', 'underline', 'image', 'video']
  },
  extensions: {
    image: new MediumEditor.extensions.image(),
    video: new CustomVideoExtension()
  }
});

위 코드에서는 CustomVideoExtension이라는 커스텀 확장 기능을 정의하고, editableClick 이벤트를 구독하여 사용자가 에디터를 클릭하면 동영상 URL을 입력하는 프롬프트 창을 표시합니다. URL을 입력하면 handleEditableClick 메서드가 호출되어 동영상이 삽입됩니다.

결론

MediumEditor는 기본적으로 텍스트 편집 기능만을 제공하지만, 확장 기능을 사용하여 멀티미디어 요소를 삽입할 수 있습니다. 이를테면 이미지나 동영상 삽입 기능을 추가하면, 웹 애플리케이션에서 좀 더 다양하고 동적인 편집 환경을 구성할 수 있습니다.

이번 글에서는 MediumEditor를 확장하여 멀티미디어 지원 기능을 추가하는 방법에 대해 알아보았습니다. MediumEditor의 확장 기능을 구현하는 방법은 간단하며, 자유로운 커스터마이징이 가능합니다. 여러분의 웹 애플리케이션이 사용자 친화적인 편집 환경을 제공할 수 있도록 MediumEditor의 멀티미디어 지원 기능을 활용해 보시기 바랍니다.

참고 자료

MediumEditor GitHub 저장소