[javascript] MediumEditor에서 에디터 툴바 버튼에 이미지 크기 선택 기능 추가하기

30 Nov 2023

javascript

MediumEditor

MediumEditor는 사용자가 손쉽게 텍스트를 편집할 수 있는 오픈 소스 WYSIWYG(What You See Is What You Get) 편집기입니다. 이 편집기는 기본적인 기능 외에도 많은 기능을 제공하고 있으며, 사용자가 콘텐츠를 편집할 때 편리한 툴바를 제공합니다.

이번에는 MediumEditor의 기본 툴바에 “이미지 크기 선택” 기능을 추가하는 방법에 대해 알아보겠습니다. 사용자가 이미지를 삽입할 때 이미지의 크기를 선택할 수 있는 버튼을 툴바에 추가해보겠습니다.

단계 1: MediumEditor 설치

먼저 MediumEditor를 설치해야 합니다. npm을 사용하는 경우 다음 명령어로 패키지를 설치할 수 있습니다:

npm install medium-editor

또는 CDN을 통해 직접 스크립트를 추가할 수도 있습니다:

<script src="https://cdn.jsdelivr.net/npm/medium-editor@5.23.3/dist/js/medium-editor.min.js"></script>

단계 2: 툴바에 이미지 크기 선택 버튼 추가하기

MediumEditor의 툴바는 HTML 요소로 구현되어 있습니다. 따라서 JavaScript를 사용하여 툴바에 버튼을 추가할 수 있습니다.

var toolbarOptions = {
  buttons: ['bold', 'italic', 'underline', 'anchor', 'imageSize'], // 이미지 크기 선택 버튼 추가
  diffLeft: 0,
  diffTop: -10,
  updateOnEmptySelection: true
};

var editor = new MediumEditor('.editable', {
  toolbar: toolbarOptions
});

toolbarOptions 객체에서 buttons 배열에 imageSize 버튼을 추가하면 됩니다. 이제 툴바에 “이미지 크기 선택” 버튼이 추가되었습니다.

단계 3: 이미지 크기 선택 기능 구현하기

이제 “이미지 크기 선택” 버튼을 클릭했을 때 이미지 크기를 선택할 수 있는 팝업 창을 띄우도록 기능을 구현해야 합니다.

var imageSizeButton = MediumEditor.extensions.button.extend({
  name: 'imageSize',
  action: function() {
    var selectedImage = editor.getSelectedParentElement();

    if (selectedImage && selectedImage.tagName === 'IMG') {
      // 이미지 크기 선택 팝업 창 표시
      showImageSizePopup(selectedImage);
    }
  }
});

MediumEditor.extensions.imageSize = imageSizeButton;

imageSizeButton 객체를 생성하고, action 메소드에서 선택한 이미지를 확인한 후 이미지 크기 선택 팝업 창을 열도록 코드를 작성합니다. showImageSizePopup 함수는 이미지 크기 선택 팝업 창을 표시하는 사용자 정의 함수입니다.

단계 4: 이미지 크기 선택 팝업 창 구현하기

마지막으로 이미지 크기 선택 팝업 창을 구현해야 합니다. 이 팝업 창은 HTML, CSS 및 JavaScript를 사용하여 직접 만들어야 합니다.

<div id="imageSizePopup" style="display: none;">
  <label for="imageWidth">Width:</label>
  <input type="number" id="imageWidth">
  <label for="imageHeight">Height:</label>
  <input type="number" id="imageHeight">
  <button id="applyButton">Apply</button>
</div>

#imageSizePopup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ccc;
  z-index: 9999;
}

#imageSizePopup label, #imageSizePopup input {
  display: block;
  margin-bottom: 5px;
}

#applyButton {
  margin-top: 10px;
}

function showImageSizePopup(selectedImage) {
  var popup = document.getElementById('imageSizePopup');
  var imageWidthInput = document.getElementById('imageWidth');
  var imageHeightInput = document.getElementById('imageHeight');
  var applyButton = document.getElementById('applyButton');

  // 이미지 크기 정보 가져오기
  var imageWidth = selectedImage.width;
  var imageHeight = selectedImage.height;

  // 팝업 창에 이미지 크기 설정
  imageWidthInput.value = imageWidth;
  imageHeightInput.value = imageHeight;

  // 팝업 창 표시
  popup.style.display = 'block';

  // "적용" 버튼 클릭 이벤트 처리
  applyButton.onclick = function() {
    // 사용자가 입력한 이미지 크기로 설정
    selectedImage.width = imageWidthInput.value;
    selectedImage.height = imageHeightInput.value;
    
    // 팝업 창 닫기
    popup.style.display = 'none';
  };
}

showImageSizePopup 함수에서는 선택한 이미지의 크기를 가져와 팝업 창에 표시하고, 사용자가 이미지 크기를 입력한 후 “적용” 버튼을 클릭하면 입력한 값을 이미지 크기로 설정하도록 구현합니다.

이제 MediumEditor에 “이미지 크기 선택” 기능이 추가되었습니다. 사용자는 이미지를 삽입할 때 이미지 크기를 선택할 수 있습니다.

참고:

MediumEditor GitHub 페이지