summernote img 태그 이미지 첨부 스프링

summernote img 태그 이미지 첨부 스프링

https://summernote.org/ 에가면 사용법등 잘설명되어 있어요.

저는 스프링에서 summernote를 사용하는 방법에대해서 정리할거에요.

일단 summernote를 다운로드 받으세요. 사이트에 가면 잘나와 있어요. 

	<link href="${pageContext.request.contextPath}/resources/editor/summernote.css" rel="stylesheet">
	<script src="${pageContext.request.contextPath}/resources/editor/summernote.js"></script>
	<!-- include summernote-ko-KR -->
	<script src="${pageContext.request.contextPath}/resources/editor/lang/summernote-ko-KR.js"></script>
    

받으셨으면 페이지에 첨부를 해요. 

페이지를 시작하는 부분에 $(document).ready(function() {});

아래코드를 첨부해요.

$('#summernote').summernote({
	    lang: 'ko-KR', // default: 'en-US'
	   	height: 500,                 // set editor height
		minHeight: 500,             // set minimum height of editor
		maxHeight: 500,             // set maximum height of editor
		focus: true,                  // set focus to editable area after initializing summe
		callbacks: {
          onImageUpload: function(files, editor, welEditable) {
            for (var i = files.length - 1; i >= 0; i--) {
              sendFile(files[i], this);
            }
          },
          onChange: function(contents, $editable) {
              console.log('onChange:', contents, $editable);
             
              new_img_list=$(".note-editable .sn_insert_img");
              if(old_img_list!='' &&new_img_list!='')
              {
              	note_image_sync(old_img_list,new_img_list);
              }
              old_img_list= $(".note-editable .sn_insert_img");
              
            },
          onBlur: function() {
              console.log('Editable area loses focus');
            },
          onFocus: function() {
              console.log('Editable area is focused');
            }
        }
	  });
	$("#summernote").summernote({
	    onMediaDelete : function($target, editor, $editable) {
	         alert($target.context.dataset.filename);         
	         $target.remove();
	    }
	}); 

섬머노트 페이지에 가면 설명이 잘되어 있어서 설명은 안하겠어요. 여기서 onImageUpload 부분을 구현해줘야 해요. 

sendFile부분을 구현해야해요. 

function sendFile(file, el) {
    var form_data = new FormData();
    form_data.append('file', file);
    $.ajax({
      data: form_data,
      headers : {
			'X-CSRF-TOKEN': $("#csrf_token").val()
		},
      type: "POST",
      url: '/admin/chart/image_upload',
      cache: false,
      contentType: false,
      enctype: 'multipart/form-data',
      processData: false,
      async: false
    }).done(function( msg ) {
        if(msg.result=='IMAGE_OK')
        {
	        var url = msg.url;
	        id = msg.id;        
	        $(el).summernote('editor.insertImage', url,fun_summernote_imgcallback);
	        $('#imageBoard > ul').append('<li><img src="'+url+'" class="summernoteimg_obj" id="'+id+'" width="100%" height="100%"/></li>');
        }
        else
    	{
        	showmessage("알림","이미지 파일이 아닙니다.",2000,'');
    	}
    });
  }

저는 이미지 파일을 db에 보관을 해요. 

image_upload부분은 이렇게 해요. 

@ResponseBody
		@RequestMapping(value ="/image_upload", method=RequestMethod.POST, produces = "application/json;charset=UTF-8")
		public Map<String, String> update_file_upload(MultipartFile file,HttpServletRequest request)throws Exception{
			Map<String, String[]> paramMap=request.getParameterMap();
			Iterator keyData = paramMap.keySet().iterator();
			CommonData dto = new CommonData();
			while (keyData.hasNext()) {
			    String key = ((String)keyData.next());
			    String[] value = paramMap.get(key);
			    dto.put(key, value[0].toString());        
			    smsp.print_String("key : " + key + ", value : " + value[0].toString());
			} 
			MediaUtils MediaUtils = new MediaUtils();
			String formatName = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1);
			MediaType mType = MediaUtils.getMediaType(formatName);
			BufferedImage resizeimg;
			if(mType!=null)
			{
				BufferedImage srcImg = ImageIO.read(file.getInputStream()); 
				/*
			    if(srcImg.getWidth()>1920) //사이즈 조절 할때
			    {
			    	smsp.print_String("사이즈 조절 1920");
			    	resizeimg = Scalr.resize(srcImg
			    			, Scalr.Method.QUALITY
			    			, Scalr.Mode.FIT_TO_WIDTH
			    			, 1920
			    			,Scalr.OP_ANTIALIAS);
			    	ByteArrayOutputStream baos_re = new ByteArrayOutputStream();
			 	    boolean foundWriter_re = ImageIO.write(resizeimg, formatName.toLowerCase(), baos_re);
			 	    baos_re.flush();
			 		byte[] imageInByte_re = baos_re.toByteArray();
			 		dto.put("mt_contentlength",baos_re.toByteArray().length);
			 		dto.put("mt_data", imageInByte_re);
			 		baos_re.close();
			    }
			    else //사이즈 조절안할때.
			    */ 
			    {	
			    	smsp.print_String("사이즈 조절안함. 1920");
			    	dto.put("mt_contentlength",file.getBytes().length);
			 	    dto.put("mt_data", file.getBytes());
			    }	   
			    BufferedImage destImg = 
			            Scalr.resize(srcImg, 
			            		Scalr.Method.BALANCED, 
			                180,180
			                ,Scalr.OP_ANTIALIAS);
			    ByteArrayOutputStream baos = new ByteArrayOutputStream();
			    boolean foundWriter = ImageIO.write(destImg, "png", baos);
				baos.flush();
				byte[] imageInByte = baos.toByteArray();
				dto.put("mt_s_data", imageInByte);
				baos.close();
			}
			Map<String, String> result = new HashMap<>();
			result.put("result", "NOT_AN_IMAGE");
			if(mType!=null)
			{
			    dto.put("mt_filename",file.getOriginalFilename());
			    dto.put("mt_type",file.getContentType());
			    HttpSession session = request.getSession();
			    Member vo = (Member) session.getAttribute("login");
			    dto.put("mt_input_id", vo.idx);
			    dto.put("mt_update_id", vo.idx);
			    first_service.insert(dto, "File_UpDown_Mapper.insert_editor_image_upload");
			    int idx= first_service.listSearchCount(dto, "File_UpDown_Mapper.select_editor_image_upload");
				result.put("result", "IMAGE_OK");
			    String url = "/editor/get_editor_image/?idx="+idx;
			    String id = ""+idx;
			    result.put("url", url);
			    result.put("id", id);
			    }
		    return result;
		}

db에 바로 넣고 있어요. 

db의 테이블은 이렇게 생겼어요. 

CREATE TABLE `editor_image_table` (
  `idx` int(11) NOT NULL AUTO_INCREMENT COMMENT '게시물 고유키값',
  `mt_uuid` varchar(40) DEFAULT NULL,
  `mt_contentlength` int(11) DEFAULT NULL COMMENT '파일사이즈.',
  `mt_filename` varchar(100) DEFAULT NULL COMMENT '이름',
  `mt_type` varchar(100) DEFAULT NULL COMMENT '파일타입',
  `mt_data` longblob DEFAULT NULL COMMENT '파일내용',
  `mt_s_data` longblob DEFAULT NULL COMMENT '축소파일내용',
  `mt_input_wdate` datetime DEFAULT NULL COMMENT '입력일',
  `mt_input_id` bigint(20) DEFAULT NULL COMMENT '입력ID',
  `mt_update_wdate` datetime DEFAULT NULL COMMENT '최종수정일',
  `mt_update_id` bigint(20) DEFAULT NULL COMMENT '최종수정ID',
  PRIMARY KEY (`idx`)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8 COMMENT='파일정보';

쿼리부분입니다. 

<!-- 이미지파일 업로드 -->
	<insert id="insert_editor_image_upload">	
		INSERT INTO editor_image_table (
						   mt_filename						
						 , mt_type
						 , mt_data
						 <if test="mt_s_data != null">
						 , mt_s_data
						 </if>
						 <if test="uid != null">
						 , mt_uuid
						 </if>
						 , mt_contentlength
						 , mt_input_wdate
						 , mt_input_id
						 , mt_update_wdate
						 , mt_update_id
						 ) 
				     VALUES (
				           #{mt_filename}				         	
				         , #{mt_type}
				         , #{mt_data}
				         <if test="mt_s_data != null">
				         , #{mt_s_data}
				         </if>
				         <if test="uid != null">
						 , #{uid}
						 </if>
				         , #{mt_contentlength}
				         , now()		          
				         , #{mt_input_id}
				         , now()
				         , #{mt_update_id}	         
				         )
	</insert>

이상입니다.