[javascript] MediumEditor에서 이미지 크기 조절 기능 사용하기

30 Nov 2023

javascript

MediumEditor는 웹 기반의 텍스트 에디터 라이브러리입니다. 이 라이브러리는 사용자가 문서를 편집하고 서식을 지정할 수 있는 다양한 기능을 제공합니다. 이미지에 대한 크기 조절 기능은 이러한 기능 중 하나입니다.

MediumEditor에 이미지 크기 조절 기능 추가하기

MediumEditor에서 이미지 크기를 조절하기 위해 medium-editor-insert-plugin 플러그인을 사용할 수 있습니다. 이 플러그인은 이미지 삽입 기능 뿐만 아니라 이미지 크기 조절 기능도 제공합니다.

먼저, medium-editor와 medium-editor-insert-plugin 을 설치합니다.

npm install medium-editor medium-editor-insert-plugin

다음으로, HTML 파일에 필요한 스타일시트와 스크립트를 추가합니다.

<link rel="stylesheet" href="node_modules/medium-editor/dist/css/medium-editor.min.css">
<link rel="stylesheet" href="node_modules/medium-editor/dist/css/themes/default.css">
<link rel="stylesheet" href="node_modules/medium-editor-insert-plugin/dist/css/medium-editor-insert-plugin.min.css">

<script src="node_modules/medium-editor/dist/js/medium-editor.min.js"></script>
<script src="node_modules/medium-editor-insert-plugin/dist/js/medium-editor-insert-plugin.min.js"></script>

이제, MediumEditor를 초기화하고 이미지 크기 조절 기능을 추가합니다.

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

$('.editable').mediumInsert({
    editor: editor,
    addons: {
        images: {
            imagesUploadScript: 'upload.php',
            uploadCompleted: function($el, data) {
                // 이미지 업로드 완료 후 실행할 코드
            }
        }
    }
});

위의 코드에서 upload.php는 서버 측에서 이미지를 업로드하기 위한 스크립트입니다. 이 스크립트는 실제로 이미지를 업로드하고 업로드된 이미지의 경로를 반환합니다. uploadCompleted 함수는 이미지 업로드가 완료된 후에 실행될 콜백 함수입니다. 이 함수에서는 업로드된 이미지를 적절한 크기로 조절하는 로직을 추가할 수 있습니다.

이제 MediumEditor에서 이미지를 삽입하고 크기를 조절할 수 있습니다.

결론

MediumEditor와 medium-editor-insert-plugin을 사용하여 이미지 크기를 조절하는 기능을 추가할 수 있습니다. 이러한 기능을 통해 사용자는 텍스트와 이미지를 보다 쉽게 편집하고 서식을 지정할 수 있습니다.

MediumEditor에 이미지 크기 조절 기능 추가하기

결론

참고 자료