[summernote] callbacks 옵션 중 onImageUpload 사용하기(FileReader)

    textarea 태그 에디터인 summernote 를 사용하여 이미지 업로드를 진행하면서 커스텀 할 일이 있어

callbacks 옵션의 onImageUpload를 사용했다. 자세한 내용은 홈페이지 api를 확인해주세요

https://summernote.org/deep-dive/#callbacks

Summernote - Super Simple WYSIWYG editor

 

onImageUpload 속성은 summernote의 이미지 업로드 시 발생하는 이벤트 핸들러라고 보면 된다.

 

 

$('#summernote').summernote({
    height: 300,                 // 에디터 높이
    minHeight: null,             // 최소 높이
    maxHeight: null,             // 최대 높이
    focus: true,                  // 에디터 로딩후 포커스를 맞출지 여부
    lang: "ko-KR", // 한글 설정
    placeholder: '', //placeholder 설정
    toolbar: [
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['style', ['style']],
        ['font', ['bold', 'underline', 'clear']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['table', ['table']],
        ['insert', ['link', 'picture', 'video']],
        ['view', ['codeview']]
    ],
    fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New','맑은 고딕','궁서','바탕체'],
    fontSizes: ['8','9','10','11','12','14','16','18','20','22','24','28','30','36','50','72'],
    callbacks: {
        onImageUpload: function(files){
            const [imageFile] = files;
            const fileReader = new FileReader();
            fileReader.onload = () => {
                 let imgData = $("<img>").attr('src', fileReader.result);
                 console.log('imgData : ',imgData[0]);
                $('#summernote').summernote("insertNode", imgData[0]);
            };
           fileReader.readAsDataURL(imageFile);
    }
}

 

위 처럼 FileList 인 files 값을 FileReader 를 통해 img 태그의 src에 담을 수 있는 이미지 문자열 URL 형식으로 변환한다.

변환 후 summernote 에 image 를 넣는다.

 

본인은 summernote 에 이미지를 보여줌과 동시에 파일형태로 따로 서버에 보낼일이 있어서 

onImageUpload 속성을 사용했다.

 

onImageUpload: function(files){}

summernote 를 통해 이미지 업로드 시 onImageUpload 이벤트 핸들러가 List 형태로 files 에 리턴한다.

아래와 같이 FileList 로 받는다.

 

FileReader

FileReader 는 type 이 file 인 input 태그 또는 API 요청과 같은 인터페이스를 통해 File 또는 Blob 객체를 

편리하게 처리할 수 있는 방법을 제공하는 객체이다.

 

File 또는 Blob 객체를 읽어서 result 속성에 저장한다. result 속성을 통해 데이터에 접근할 수 있다.

 

• FileReader 함수
  1. readAsText(File 또는 Blob) : 텍스트로 읽는다.
  2. readAsDataUrl(File 또는 Blob) : 데이터를 URL 표현으로 변환
  3. readAsArrayBuffer(File 또는 Blob) : 배열 버퍼로 읽는다.
  4. readAsBinaryString(File 또는 Blob) : 바이너리 문자열로 읽는다.

 

FileReader 객체에서 File 또는 Blob 객체를 읽을 수 있는 네 가지 함수가 있다.

 

• FileReader 에서 객체를 읽을 수 있는 함수
  1. load : 파일 읽기 작업이 완료되면 동작한다.
     • FileReader.onload = () => { 작업 완료시 동작코드 };
  2. error : 에러로 인해 파일을 읽을 수 없을 때 동작한다.
     • FileReader.onerror = () => { 에러 시 동작코드 };
  3. abort : abort() 함수를 호출하여 파일 읽기 작업이 취소될 때 동작한다.
     • FileReader.onerror = () => { 읽기 작업이 중단될 때 동작코드 };

 

예시)

let file = new File('test.png');
const fileReader = new FileReader();
fileReader.onload = () => {
    let imgData = $("<img>").attr('src', fileReader.result);
    $('#summernote').summernote("insertNode", imgData[0]);
};
fileReader.readAsDataURL(file);