[javascript] MediumEditor에서 이미지 삽입하기

30 Nov 2023

javascript

MediumEditor는 사용자가 웹 페이지에서 텍스트를 편집하는 데 사용할 수 있는 강력한 WYSIWYG (What You See Is What You Get) 에디터입니다. 이 에디터를 사용하면 사용자는 글쓰기와 동시에 서식을 적용할 수 있습니다.

하지만 기본적으로 MediumEditor에는 이미지 삽입 기능이 없습니다. 따라서 사용자가 이미지를 삽입하려면 몇 가지 작업을 해야 합니다. 이 문서에서는 MediumEditor에서 이미지를 삽입하는 방법을 설명하겠습니다.

이미지 삽입을 위한 준비 작업

MediumEditor에 이미지를 삽입하기 위해서는 다음과 같은 작업을 진행해야 합니다.

이미지 업로드를 처리할 서버를 구성해야 합니다. 서버는 클라이언트에서 전송한 이미지를 저장하고, 이미지의 경로를 응답으로 반환해야 합니다.
이미지 삽입 버튼을 MediumEditor 툴바에 추가해야 합니다. 이 버튼을 클릭하면 이미지 업로드 대화 상자가 나타나고, 사용자는 이미지 파일을 선택하고 서버로 업로드할 수 있습니다.

이미지 삽입 기능 추가하기

다음은 MediumEditor에 이미지 삽입 기능을 추가하는 예제 코드입니다.

// MediumEditor에서 이미지를 삽입할 수 있는 커스텀 버튼을 생성합니다.
var imageButton = MediumEditor.extensions.button.extend({
  name: 'image',
  action: function() {
    // 이미지 업로드 대화 상자를 표시하는 코드를 작성하세요.
    // 사용자가 이미지를 선택하면, 해당 파일을 서버로 업로드하세요.
    // 업로드가 완료되면, 이미지의 경로를 MediumEditor에 삽입하는 코드를 작성하세요.
  },
  aria: 'Insert Image',
  contentDefault: '<i class="fa fa-picture-o"></i>',
  contentFA: '<i class="fa fa-picture-o"></i>'
});

// MediumEditor 인스턴스를 생성합니다.
var editor = new MediumEditor('.editable', {
  toolbar: {
    buttons: ['bold', 'italic', 'image']
  },
  extensions: {
    'image': new imageButton()
  }
});

위의 코드에서는 MediumEditor의 확장 기능을 사용하여 이미지 삽입 버튼을 커스텀합니다. imageButton 객체를 생성하고, action 메서드에 이미지 업로드 대화 상자를 표시하고 업로드된 이미지의 경로를 에디터에 삽입하는 코드를 작성해야 합니다.

또한, MediumEditor 인스턴스를 생성할 때 toolbar 옵션을 설정하여 이미지 삽입 버튼을 툴바에 추가하고, extensions 옵션을 설정하여 커스텀 버튼을 등록합니다.

이제 MediumEditor에서 이미지를 삽입하는 기능을 갖춘 에디터를 사용할 수 있습니다.

이 문서에서는 MediumEditor에서 이미지를 삽입하는 방법을 간략히 설명했습니다. 더 자세한 내용은 MediumEditor 공식 문서를 참조하시기 바랍니다.