[javascript] MediumEditor와 이미지 업로드 라이브러리 연동하기

30 Nov 2023

javascript

이번 포스트에서는 MediumEditor라는 WYSIWYG(What You See Is What You Get) 에디터와 이미지 업로드 라이브러리를 연동하는 방법을 알아보겠습니다.

MediumEditor 소개

MediumEditor는 유연하고 사용하기 쉬운 에디터 라이브러리로, HTML 내용을 편집할 수 있게 해줍니다. 일반 텍스트 외에도 이미지와 동영상도 삽입할 수 있습니다.

이미지 업로드 라이브러리 소개

이미지 업로드 라이브러리는 에디터에 이미지를 삽입할 때 이미지를 서버로 업로드하고, 업로드된 이미지의 링크를 에디터에 삽입하는 역할을 합니다. 대표적으로 Dropzone.js와 Fine Uploader 등이 있습니다.

연동 방법

MediumEditor와 이미지 업로드 라이브러리를 프로젝트에 설치합니다.
에디터를 초기화하고 옵션을 설정합니다.
이미지 업로드 기능을 구현합니다.
에디터에 이미지를 삽입하는 기능을 추가합니다.

Step 1: 설치

먼저, MediumEditor와 이미지 업로드 라이브러리를 프로젝트에 설치합니다.

npm install medium-editor

npm install dropzone // 예시로 Dropzone.js를 설치하는 경우

Step 2: 에디터 초기화 및 옵션 설정

다음으로, 에디터를 초기화하고 옵션을 설정합니다.

import MediumEditor from 'medium-editor';

const editor = new MediumEditor('.editable', {
    // 에디터 옵션 설정
});

editor.init();

Step 3: 이미지 업로드 구현

이미지 업로드 기능을 구현하기 위해, 이미지 업로드 라이브러리의 API를 사용합니다. 아래는 Dropzone.js를 사용하는 예시 코드입니다.

import Dropzone from 'dropzone';

new Dropzone('.dropzone', {
    // Dropzone.js 옵션 설정
    url: '/upload', // 이미지 업로드 URL
    paramName: 'image', // 이미지 데이터 파라미터 이름
    acceptedFiles: 'image/*', // 허용되는 파일 종류
    maxFilesize: 10, // 최대 파일 크기 (MB)
    success: function (file, response) {
        // 이미지 업로드 성공 시 이미지 URL을 받아옴
        const imageUrl = response.imageUrl;

        // 이미지 URL을 에디터에 추가
        editor.select();
        editor.pasteHTML('<img src="' + imageUrl + '">');
    },
});

Step 4: 이미지 삽입 기능 추가

마지막으로, 사용자가 이미지를 삽입할 수 있는 버튼을 추가합니다.

<button id="insert-image-button">이미지 삽입</button>

const insertImageButton = document.getElementById('insert-image-button');

insertImageButton.addEventListener('click', function () {
    // 이미지 업로드 기능 호출
    // 이미지 URL을 받아온 뒤 에디터에 추가하기
});

위와 같은 방식으로 MediumEditor와 이미지 업로드 라이브러리를 연동할 수 있습니다. 해당 라이브러리의 문서를 참고하면 더 자세한 옵션과 사용법을 확인할 수 있으니 참고하시기 바랍니다.

결론

MediumEditor와 이미지 업로드 라이브러리를 연동하면 편리하고 사용자 친화적인 WYSIWYG 에디터를 만들 수 있습니다. 이미지 업로드 기능을 추가하여 사용자가 쉽게 이미지를 삽입할 수 있도록 해보세요.

참고 문서: